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

Unable to modify the width of textarea

PHP code to send an HTML template via email:

Why isn't my Vue.js application automatically refreshing when I add or remove an object from the array?

Executing a PHP function within the same file using AJAX: A step-by-step guide

Arranging elements in columns using Bootstrap

Implement the usage of plainToClass within the constructor function

Refresh the div element's HTML and content using AJAX

the menu didn't glide into view

Switching HTML text by clicking or tapping on it

When utilizing "column-count" with "display: flex", both Firefox and IE will only render a single column

Toggle switch unable to reset upon reloading the page

Tips for showcasing array values on an HTML webpage

Steps to connect my CSS with my HTML in a website hosted on GitHub

Have you ever wondered why req.body returns as undefined when using body parser?

Looking to create a row-column-row layout using CSS flexbox techniques

Reduce the number of divs on a webpage while incorporating animated transitions

The specified font-size in my CSS is being ignored by Chrome

Tips for preventing redundant data entry in a table

Utilizing jQuery to dynamically load CSS files on a webpage

Confirming the validity of an email address with Md-chips