How to create an exit intent popup

Author: Saksham

Exit intent popup

An exit-intent popup is a type of popup that appears when a user is about to leave your website or page. It is a great way to capture the attention of your website visitors and keep them engaged. Here are the steps to create an exit-intent popup:

How to create it without any plugin?

Creating an exit-intent popup without a plugin can be done using HTML, CSS, and JavaScript. Here are the steps to create one:

  1. Create the HTML markup: Start by creating the HTML markup for your popup. This will typically include a container div with a class name, a close button, and the content you want to display in your popup.

<div class="exit-intent-popup">
<div class="popup-content">
<h2>Don't leave yet!</h2>
<p>Enter your email to get our latest updates and special offers.</p>
<input type="email" name="email" placeholder="Enter your email">
<button type="submit">Subscribe</button>
<button class="close-button">&times;</button>

  1. Style the popup with CSS: Use CSS to style your popup container and the content inside it. You can use properties such as width, height, background color, font size, and padding to customize the look of your popup.

.exit-intent-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
background-color: #fff;
padding: 20px;
width: 400px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);

.popup-content {
text-align: center;
padding-bottom: 20px;

.close-button {
position: absolute;
top: 10px;
right: 10px;
font-size: 30px;
cursor: pointer;

  1. Add the JavaScript code: To create the exit-intent behavior, you need to add JavaScript code that detects when the user is about to leave the page. You can do this by listening to the mouseleave event on the document object and checking the mouse position against the viewport.

document.addEventListener("mouseleave", function(event) {
if (event.clientY <= 0) {
// show the popup
document.querySelector(".exit-intent-popup").style.display = "block";

document.querySelector(".close-button").addEventListener("click", function() {
// hide the popup when the close button is clicked
document.querySelector(".exit-intent-popup").style.display = "none";

This code listens for the mouseleave event on the document object and checks whether the mouse is above the top of the viewport. If it is, it shows the popup by setting its display property to “block”. The close button also has a click event listener that hides the popup when clicked.

  1. Add the code to your website: Finally, copy the HTML, CSS, and JavaScript code and paste it into the relevant files on your website. You can also customize the code further to match your website’s design and content.

With these steps, you can create an exit-intent popup without using a plugin. However, keep in mind that plugins can offer additional features and customization options, so consider using one if you need more advanced functionality.

blog author bio

Author: Saksham

Saksham is a driven Computer Science student with a passion for programming and exploring new technologies. In his articles, he provides valuable insights of the topics, showcasing his ability to communicate complex ideas in a clear and concise manner. With strong analytical and problem-solving skills, Saksham is poised to make a significant impact in the world of Computer Science.

Share on: Share Poonam yogi blogs on twitter Share Poonam yogi blogs on facebook Share Poonam yogi blogs on WhatsApp Create Pin in Pinterest for this post

Related Posts


Please give us your valuable feedback

Your email address will not be published. Required fields are marked *

SQL Server installation in Hindi
SQL Server installation in Hindi

SQL सर्वर इंस्टॉलेशन गाइड
यह लेख बताएगा कि SQL सर्वर 2019 डेवलपर संस्करण और SQL सर्वर प्रबंधन स्टूडियो (SSMS) को चरण दर चरण कैसे स्थापित किया जाए।
विंडोज़ में SQL सर्वर 2019 डेवलपर संस्करण स्थापित करें

Read full article
भारत का राष्ट्रीय फूल | भारत के राष्ट्रीय प्रतीक
भारत का राष्ट्रीय फूल | भारत के राष्ट्रीय प्रतीक

भारत का राष्ट्रीय फूल कौन सा है
कमल भारत का राष्ट्रीय फूल है। कमल जिसका वैज्ञानिक नाम नेलुम्बो न्यूसीफेरा गर्टन है, एक पवित्र फूल है और प्राचीन भारत की कला और पौराणिक कथाओं में एक अद्वितीय और विशिष्ट स्थान रखता है। कमल भारतीय संस्कृति में एक शुभ प्रतीक है।

Read full article
WordPress वेबसाइट में अपनी पोस्ट सामग्री में AdSense ads कैसे डालें
WordPress वेबसाइट में अपनी पोस्ट सामग्री में AdSense ads कैसे डालें

Google AdSense विज्ञापनों से राजस्व बढ़ाने के लिए, आपको विज्ञापनों को उचित स्थानों पर रखने पर काम करना होगा ताकि वे अधिकतम राजस्व उत्पन्न कर सकें।
विज्ञापनों को उचित स्थानों पर रखने से Google AdSense की आय में 100% 300% की वृद्धि हो सकती है।
कुछ महत्वपूर्ण स्थान जहां ऐडसेंस विज्ञापन अधिकतम राजस्व उत्पन्न करते हैं, पृष्ठ शीर्षक से नीचे हैं, दूसरे पैराग्राफ के बाद, पाद लेख में एंकर विज्ञापन आदि।

Read full article
Node.js: A Comprehensive Guide
Node.js: A Comprehensive Guide

Node.js is a popular open-source runtime environment that is widely used for building scalable and fast server-side applications. It is built on top of the Chrome V8 JavaScript engine and uses an event-driven, non-blocking I/O model.

Read full article