How to make exit popup without writing actual code
Exit Popup’s, what are they?
Exit popup’s can be useful to grab attention of a user while he is about to leave. They are popup windows either external windows or a window that will pop right inside the page. They can help you sell products or to make free offers on your product and services etc.
So here’s the demo of what we will be building.
Step 1
Setting up the markup: Markup for this is not to complicated. We just an HTML page with some basic text contents. Next we will write up the popup box markup.
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<title>Exitpop</title>
-
<style>
-
body{
-
font-family:Arial, Helvetica, sans-serif;
-
font-size:100%;
-
}
-
#dummpage{
-
padding:0 20px;
-
width:750px;
-
margin:0 auto;
-
}
-
.red{
-
color:#C00;
-
}
-
</style>
-
</head>
-
<body>
-
<div id="dummpage">
-
<p> Paragraph text here…..
-
</div>
Step 2
The Popup Box: Here’s the markup for the popup box. We will be placing the box out of our page contents right above the body tag.
-
<div id="exit_popup">
-
<center>
-
<h1 class="red">Wait…This a Popup Window!</h1>
-
<p><img src="images/stopsign.png" width="300" height="424" alt="Stop Sign" /></p>
-
<p>It can Contain:</p>
-
<h3>Text, Images, HTML, Forms etc.</h3>
-
</center>
-
</div>
Important thing to note in the markup is that you have to give it an ID of “exit_popup” to work with the script, else the popup wont work.
-
<div id="exit_popup">
Step 3
Styling the Popup Box: Below are the CSS styles for the popup.
-
#simplemodal-overlay {
-
background-color:#000;
-
}
-
-
/* Container */
-
#simplemodal-container {
-
width: 500px;
-
background-color:#fff;
-
border:4px solid #022c94;
-
-moz-border-radius: 20px;
-
-webkit-border-radius: 20px;
-
}
-
-
#simplemodal-container a.modalCloseImg {
-
background:url('closebtn.png') no-repeat;
-
width:32px;
-
height:32px;
-
display:inline;
-
z-index:3200;
-
position:absolute;
-
top:-15px; left:-18px;
-
cursor:pointer;
-
}
-
#simplemodal-container #basicModalContent {
-
padding:20px;
-
}
Description of Styles
#simplemodal-overlay – This selector controls the color of the semi-transparent page background. By default it is set to black but you can you use any color of choice.
#simplemodal-container – This selector is the basic container of the exit pop.
#simplemodal-container a.modalCloseImg – This selector makes the close button on the top left corner of the exit pop.
#simplemodal-container #basicModalContent – This selector controls the basic alignment of the content inside the exit pop container.
Step 4
The Magic Script: Now to get the effect we are going to use a JavaScript code library called jquery. Jquery is a much more bigger thing and we can make a lot of awesome effects using it, but that is out of scope of this tutorial. For now we will focus on popping the exit window. So first thing we are going to include the JavaScript files.
-
<script src="js/jquery.js" language="javascript" type="text/javascript"></script>
-
<script src="js/exitpop.js" language="javascript" type="text/javascript"></script>
-
<script src="js/popuptrigger.js" language="javascript" type="text/javascript"></script>
jquery.js – This is the very famous javascript and ajax library used extensively on the world wide web. Its important to load it first up before anyother scripts so that the library function are available to the other scripts.
exitpop.js – This is the exit popup script which renders the popup effect.
popuptrigger.js – This is the switch which turn on the exit popup effect without this it wont work.
So we are done with the script part of the page. Short and sweet 3 lines of code which include the necessary scripts.
Step 5
Hiding the Box: Next thing we do is to hide the popup box which is showing right now on the page.
-
<div style="display:none;" id="exit_popup">
The display:none hides the box, so that its invisible initially when page loads and pops when user tries to exit the page.
Ok now as the box is hidden, the popup should be working. It can be seen in action right here
Results
So this is how you create a simple popup box using three lines of code and some CSS styling. I hope the information was useful. Always open to suggestions and ideas.