Web developers at times need to display some information to the users via a means of a popup. Clearly, the regular popups don’t look professional at all. Thus, to create professional looking stylish popups was a demand for the web developers. Hence, jQuery popups came into being. These popups don’t open any new window or tab in the users browser. It just creates a popup, which is displayed on the same page and does not look annoying.
Well, all that being said, you can go ahead and have a look at a sample jQuery popup, and also you can download the entire source code if you wish.
VIEW DEMO | DOWNLOAD
Without saying more theoretical stuff, let’s get started in creating our jQuery popup menu.
Creating a jQuery Popup menu
1. Create a new HTML page, or use your current one if you wish. In the new page, paste the following lines of code in the newly created HTML page.
<html> <head> <title>Creating jQuery Popup</title> <link href="style.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script> <script type="text/javascript" src="script.js"></script> </head> <body> <a href="#" class="popup">Click Here to Create a Popup</a> <div id="Popup"> <div class="close"></div> <span class="popup_tooltip">Press Esc to close <span class="arrow"></span></span> <div id="popup_content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non vehicula tellus, sit amet tristique est. Nulla congue nunc non arcu dictum, at egestas sapien ornare. Aliquam erat volutpat. Aliquam pulvinar libero purus, ac ultrices enim semper eu. Maecenas pharetra mi quis nisi ultricies iaculis. Etiam at gravida neque. Aliquam nec nisi sem. In laoreet placerat dictum. Ut vitae nulla at eros ultrices elementum et nec leo. Donec purus augue, ultricies non mauris at, convallis vulputate ante. Phasellus vel volutpat velit, eget dignissim ipsum. Praesent commodo lacinia turpis, et cursus lectus viverra sit amet. Sed quis lectus a ante varius vehicula fringilla in turpis. Vestibulum ac convallis nisl. </p> <br /> <p>Suspendisse lobortis ante vitae tincidunt lacinia. Aenean lectus augue, fringilla hendrerit malesuada posuere, euismod eu elit. Donec suscipit, lorem non scelerisque sollicitudin, diam est luctus urna, sed elementum lorem velit eu massa. Curabitur at risus lobortis, sagittis nisi et, sagittis nunc. Donec cursus neque sem, nec lacinia elit feugiat vitae. Integer imperdiet feugiat purus, rhoncus dictum metus lacinia a. Quisque tempor lectus convallis tincidunt scelerisque. Sed luctus ornare est in rhoncus. Duis interdum rutrum justo, a adipiscing tellus imperdiet a. In eu tellus vehicula, consectetur lectus vehicula, lobortis augue. Mauris elementum dui id nunc feugiat porta. </p> </div> </div> <div class="loader"></div> <div id="backgroundPopup"></div> </body> </html>
2. Next, we will create the style sheet for the page. In the style sheet, we will define the div element to be hidden on the main page. But we will display the contents of the div element when the user clicks on a link. Name the style sheet : style.css
/*
Stylesheet by Aneesh Bhatnagar
Website: www.slashcoding.com
*/
#backgroundPopup {
z-index:1;
position: fixed;
display:none;
height:100%;
width:100%;
background:#000000;
top:0px;
left:0px;
}
#Popup {
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #ccc;
border-radius: 3px 3px 3px 3px;
color: #333333;
display: none;
font-size: 14px;
left: 50%;
margin-left: -402px;
position: fixed;
top: 20%;
width: 800px;
z-index: 2;
}
div.loader {
background: url("img/loading.gif") no-repeat scroll 0 0 transparent;
height: 32px;
width: 32px;
display: none;
z-index: 9999;
top: 40%;
left: 50%;
position: absolute;
margin-left: -10px;
}
div.close {
background: url("img/closebox.png") no-repeat scroll 0 0 transparent;
bottom: 24px;
cursor: pointer;
float: right;
height: 30px;
left: 27px;
position: relative;
width: 30px;
}
span.popup_tooltip {
background: none repeat scroll 0 0 #000000;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
display: none;
font-size: 11px;
height: 16px;
opacity: 0.7;
padding: 4px 3px 2px 5px;
position: absolute;
right: -62px;
text-align: center;
top: -51px;
width: 93px;
}
span.arrow {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 7px solid #000000;
display: block;
height: 1px;
left: 40px;
position: relative;
top: 3px;
width: 1px;
}
div#popup_content {
margin: 4px 7px;
}
3. In the style sheet above, I have used two images. You can download these images from below and then save them in a folder called img in the same place as your other files.
4. Next, we need to create the JavaScript file, which will hold our jQuery script for the popup to work. Create a new file and name it script.js. Place the following lines of code in that file.
jQuery(function($) {
$("a.popup").click(function() {
loading();
setTimeout(function(){
loadPopup();
}, 500);
return false;
});
$("div.close").hover(
function() {
$('span.popup_tooltip').show();
},
function () {
$('span.popup_tooltip').hide();
}
);
$("div.close").click(function() {
disablePopup();
});
$(this).keyup(function(event) {
if (event.which == 27) {
disablePopup();
}
});
$("div#backgroundPopup").click(function() {
disablePopup();
});
function loading() {
$("div.loader").show();
}
function closeloading() {
$("div.loader").fadeOut('normal');
}
var popupStatus = 0;
function loadPopup() {
if(popupStatus == 0) {
closeloading();
$("#Popup").fadeIn(0500);
$("#backgroundPopup").css("opacity", "0.7");
$("#backgroundPopup").fadeIn(0001);
popupStatus = 1;
}
}
function disablePopup() {
if(popupStatus == 1) {
$("#Popup").fadeOut("normal");
$("#backgroundPopup").fadeOut("normal");
popupStatus = 0;
}
}
});
Let me explain you the code that we have just written in brief. Basically we trigger the loading function in the HTML. This function then creates a delay of 0.5 seconds and then the loadPopup function is triggered. This function then displays the content of the popup.
5. Well, that’s it. You just made a popup window on your webpage using jQuery and CSS.
I hope this tutorial helped you create something useful for your website or blog. If you face any problems, be free to contact me using the Contact page or by commenting below. Also, don’t forget to subscribe to Slash Coding for latest post updates via RSS Feeds, Facebook, Google+ or Twitter.
i got an idea to use this code but how to pass the database value to the textbox of popup window which is fetch through php code from mysql
Hey Purushotham,
You can do that by placing the text from your SQL Database into the “popup_content” div. It will display whatever content you send it, via PHP or HTML or whatever!
Hope this helps!
when i put value=”php echo” for input textbox its not showing the php database value Aneesh Bhatnagar please help me…
What ever you want to echo, put it in a variable in PHP and then put that variable in the input value field.
when i put value=”” for input textbox its not showing the php database value Aneesh Bhatnagar please help me…
When you put the value from PHP, try putting it inside a PHP variable first, and then assigning that variable to the input value.
Samething i did but its not working….
but its not working i did same way
Hi Aneesh,
Thanks for the great post! Do you think you can find the time to make this pop-up work in a way so that it can be used multiple times on the same page? I’m currently struggling to get this done :'(
Hey Kevin,
Sorry for a delayed reply. I’ve been busy.
You can make multiple popups by changing the id for every popup that you create. And then you will need to do some additional JavaScript coding to find out which popup to display and close when a user selects.
HI … thanks for posting this idea it was very help full … 🙂
I’m glad this helped you! 🙂