Interactive pop-up messages created with CSS and JavaScript that appear and fade based on the URL query string

Question

Interactive pop-up messages created with CSS and JavaScript that appear and fade based on the URL query string

I have a referral form on this page that I want people to use repeatedly.

After submitting the form, it reloads the page with the query string ?referralsent=true so users can refer more people through the form.

However, I also want to show users a confirmation message after they send an invitation.

To achieve this, my idea is to briefly display a popup message saying "Invitation sent" for a couple of seconds following the reload, which would then fade out.

I'm not sure how to implement this feature. Do you have any examples or tips on how to make it happen?

javascript jquery html css

Answer 1

Answer №1

If you want to show a message after a certain amount of time using JavaScript, you can use the Timeout function:

Here is an example of how you can achieve this in your HTML code:

<div class="message hide" id="messageUser">
   <!-- Content for the hidden message -->
</div>

And here is the CSS styling for the message and the "hide" class that will initially hide it:

.message {
  display: block;
  border: 2px solid #ccc;
  padding: 20px;
}

.hide {
  display: none;
}

Finally, here is the JavaScript code that will remove the "hide" class from the message element after a 2-second delay:

setTimeout(function() {
  document.getElementById('messageUser').classList.remove('hide');
}, 2000);

Answer 2

If you want to show a message after a certain amount of time using JavaScript, you can use the Timeout function:

Here is an example of how you can achieve this in your HTML code:

<div class="message hide" id="messageUser">
   <!-- Content for the hidden message -->
</div>

And here is the CSS styling for the message and the "hide" class that will initially hide it:

.message {
  display: block;
  border: 2px solid #ccc;
  padding: 20px;
}

.hide {
  display: none;
}

Finally, here is the JavaScript code that will remove the "hide" class from the message element after a 2-second delay:

setTimeout(function() {
  document.getElementById('messageUser').classList.remove('hide');
}, 2000);

Interactive pop-up messages created with CSS and JavaScript that appear and fade based on the URL query string

Answer №1

Similar questions

What steps can I take to incorporate a user-controlled autoscroll feature into this Carousel?

Retrieving Text following an HTML Element with a Parsing Tool

Is it possible for a MySQL loop to only delete the first entry?

How to stop event propagation from a draggable element nested within a sortable container in jQuery UI

What is the best way to implement momentJS globally in VueJS 2?

Tips for effectively passing a $scope object between various controllers

Prevent webpage from resizing when window dimensions change

Using jQuery, you can dynamically switch pages by making asynchronous requests to the server using AJAX

ClickEvent (or element selector) is experiencing functionality issues

switch from ajax response to spring boot

What is the best way to apply an outer border to a table using CKEDITOR?

What is the procedure for renaming an item within a basic array in Angular?

Regex pattern to replace the zero preceding two times within a string based on distinct criteria

Using jQuery to create divs that can both be dropped onto and scrolled

The font face feature does not seem to be functioning properly in the IE browser

Restrict the height of posts created in the summernote editor

Issue with jquery.validate.js in an MVC 4 Project using jQuery 1.9

Transmitting data via POST method within datatables ajax call

When adjusting to mobile dimensions, the responsive website design struggles to center the navbar properly

Error: 'fs' module not found in React.js and cannot be resolved