JQuery css popup creation from scratch using simple CSS and JQuery

JQuery css popup creation from scratch using simple CSS and JQuery

Jquery CSS popup windows are very common in modern websites. They host a series of objects in a website. They might contain advertisements, forms or even notifications from the administration panel. So, how do these work? Well, previously there were basic popups or notification windows that were powered by on-page JavaScript. You can find these on some of the modern websites too. Other than this, there are the JavaScript and jQuery based custom modal dialogs.

A jquery css popup provides a good interface and needs some simple editing in the inbuilt values to get your desired output. However, for the beginners, jquery css popup is a better option. I myself would suggest a jQuery popup box for this purpose because this procedure is far easier to understand and implement.

jquery css popup tutorial - a 100 web solutions

If you possess the basic knowledge of HTML and CSS, and are willing to stretch your brain a bit further; you can master the art of creating a jquery css popup. What we do here is implement an HTML structure with CSS as the popup window. Unlike the jQueryUI plugin modal window, this procedure does not require you to know complex jQuery syntax.

So, first of all let us understand the concept of what exactly this jquery css popup is all about. We have three sections in the page. The first one is the main section of the page that is visible in normal. The second is the hidden overlying layer that has a cent per cent height and width as that of the main page. This also has a dark background and a higher z-index value than that of the main page wrapper. The jquery css popup is a small div element on top of the latter two. This has the maximum z-index and other customary HTML and styling.

Markup for our jquery css popup

<div id="wrapper">
<div id="popup">
<div style="width: auto; height: auto; overflow: auto; background: #f6f6f6; margin-top: 5%; margin-bottom: 5%; padding: 25px; font-size: 22px; line-height: 30px;">Click on the button below or anywhere outside my border and I will vanish !<span style="color: #d57111;">Only jQuery and CSS</span>

</div>
<input id="hidepopup" type="submit" value="CLOSE" />

</div>
<div id="overlay"></div>
<div id="main">
<div style="width: 550px; float: left;">This is the basic page view</div>
<div style="width: 550px; float: left;"><input id="showpopup" type="submit" value="Click to view popup window !" /></div>
</div>
</div>
body
{
margin: 0;
padding: 0;
}
#wrapper
{
width: 99%;
height: 99%;
}
#popup
{
display: none;
width: 30%;
height: auto;
overflow: auto;
left: 35%;
top: 20%;
position: absolute;
z-index: 2000;
border: 2px dashed #d57111;
background: #f9f9f9;
padding-bottom: 20px
}
#main
{
width: 600px;
height: 150px;
margin-top: 200px;
margin-left: 250px;
margin-right: auto;
padding: 30px;
border: 1px solid #ddd;
font-size: 25px;
color: #555;
line-height: 35px;
letter-spacing: 2px;
padding-left: 250px;
}
#main input
{
width: 350px;
height: 50px;
background: transparent;
border: 1px solid #222;
background: deepskyblue;
color: #fff;
font-size: 20px;
line-height: 35px;
letter-spacing: 2px;
}
#main input:hover
{
cursor: pointer;
background: dodgerblue;
}
#overlay
{
display: none;
width: 100%;
height: 1000px;
left: 0;
top: 0;
position: absolute;
z-index: 1000;
background: #333;
}
#popup input
{
float: right;
margin-right: 30px;
border: none;
background: transparent;
width: 100px;
height: 30px;
background: #d57111;
color: #fff;
}
#popup input:hover
{
cursor: pointer;
background: #444;
}

After this, we add some script in jQuery so that the jquery css popup works according to user interaction. Our jQuery commands will be written so as to direct the popup with jquery to appear when the user asks for it, and to disappear when cancelled.

This means we need to allot some ids and classes to the existing elements that the user will interact with. Once the ids are allotted, we are ready to strike with jQuery. So, the script will be –

$(document).ready(function(){
$("input#showpopup").click(function(){
$("div#overlay").fadeIn('500');
$("div#popup").delay('800');
$("div#popup").fadeIn('500');
});

$("div#overlay").click(function(){
$("div#popup").fadeOut('500');
$("div#overlay").delay('800');
$("div#overlay").fadeOut('500');
});

$("input#hidepopup").click(function(){
$("div#popup").fadeOut('500');
$("div#overlay").delay('800');
$("div#overlay").fadeOut('500');
});
});

Once the file is complete, we save it and rush to the demo. Eureka! It works awesome. Our jquery css popup can also run on static HTML pages. So, rush and create your own customized popup.

  • Supti

    thanks for the info.. it helped me a lot

  • shabby

    i struggled with this a lot during project . . . nice job bro

  • nice

  • hdpavan

    This is Awesome smooth pop

  • Sunil Pachlangia

    Can u tell me how to show images according to drop down values…???
    Means first time i am showing all images and a drop down. By selecting drop down’s event images related to that event will be showed.

    • Hi, thanks for browsing through my article.

      I would love to help you with that Sunil. It would have been better for me to help you out with the full code snippet. nevertheless, as much as I have understood it; you can do this. Add respective classes to images in a group. Suppose you have three groups of images – nature, widllife and food. Add these categories as the class attribute for individual images. Now, on the drop down event, capture the drop down value with $(this).val() and accordingly display the images such as $(‘.classNameForImageHere’).show()

      If it is still unclear, just mail me your query and I’ll get back to you with a full solution