You have seen some websites which suddenly shows a Modal Pop Up for subscribing to their blog, to show a product deal or anything they want you to focus on. In this tutorial we will see how we can create a simple Modal Pop Up that opens on a delay of 3 seconds and user can choose to close it or do a action that you desire them to do.
In the following quick tip, I’m going to show you how to open a modal window on a web page after a short time delay.
Why Delayed Modal Popups?
Introducing modal popups after a certain delay can be beneficial for several reasons:
- Engagement: By strategically timing the appearance of modal popups, you can capture users’ attention when they are most receptive.
- Guidance: Delayed popups can serve as guiding prompts, helping users navigate through processes or highlighting important information.
- Feedback: They can be utilized to gather feedback or responses from users after they have interacted with your website for a certain duration.
Step-by-Step Guide
Let’s dive into the implementation details:
HTML Structure
Firstly, we need to create the HTML structure for our modal popup:
<div id=”overlay”>
<div id=”popup”>
<h1>This is the popup</h1><p>Your Text Here</p>
<span class=”close” onclick=”document.getElementById(‘overlay’).style.display=’none'”>×</span></div></div>
CSS Styling
Style the modal popup using CSS to make it visually appealing and responsive:
<style>
* { font-family:Poppins,-apple-system,BlinkMacSystemFont,”Segoe UI”,Roboto,”Helvetica Neue”,Arial,”Noto Sans”,sans-serif,”Apple Color Emoji”,”Segoe UI Emoji”,”Segoe UI Symbol”,”Noto Color Emoji”; } body{margin:0; width: 100%; height: 100%;font-family:Poppins,-apple-system,BlinkMacSystemFont,”Segoe UI”,Roboto,”Helvetica Neue”,Arial,”Noto Sans”,sans-serif,”Apple Color Emoji”,”Segoe UI Emoji”,”Segoe UI Symbol”,”Noto Color Emoji”;font-size:.94rem;font-weight:400;line-height:1.5;color:#aaa;text-align:left;background-color:#0e0e0e;} [tabindex=”-1″]:focus:not(:focus-visible){outline:0!important;} h1 { color: SeaGreen; } p, li { font-size: 18px; } a { text-decoration: none; } #overlay{ position: fixed; top: 0; bottom: 0;background-color: rgba(0, 0, 0, 0.8); left: 0;right: 0; z-index: 99999; display:none ; } #popup{ background: #fff; padding: 20px; max-width: 520px; margin: 20% auto;position: relative; color: #0e0e0e; } .close{ position: absolute; top: 4px; right: 8px; font-size: 20px;cursor: pointer;z-index: 5; }
</style>
JavaScript Functionality
Now, let’s implement the JavaScript code to display the modal popup after a specified delay:
<script>
var delay_popup = 6000;setTimeout(“document.getElementById(‘overlay’).style.display=’block'”, delay_popup)
</script>
Make it Yours!
- Customize the Delay: Change the delay value in setTimeout to control how long before the modal appears.
- Get Creative: This is just a basic example. You can modify the content and styling of the modal to match your website’s design and message.
Conclusion
By following these steps, you can effortlessly implement a delayed modal popup in your web applications. Remember to tailor the delay duration according to your specific use case and user behavior patterns to maximize its effectiveness. Happy coding! ????