Pop Up in jQuery

Here in this post we will discuss how to make a Pop Up window and open it on click of a button.

Lets start with creating a new web Application:

Step 1: Create New Asp.Net Web Application

Step 2: Include jquery-1.9.1.js in Default.aspx as.

<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>

Step 3: Add following code in Default.aspx, to show a button (click on this will open Pop Up)

<div><input type="button" id="openPopUp" value="Click Me to Open Pop Up" class="button" />        <%--Following Div will be shown in pop up--%><div><div id="overlay" class="popUpOverlay"></div><div id="popUpWindow" class="popUpWindowToOpen"><div class="popUpTitle">
                    Heading <a href="#" id="closePopUp" class="closeButton"><img src="../Images/close16.png" /></a></div><div class="padding20">
                    Welcome to the world of Scripting and Styling Windows...!!!</div></div></div></div>

Step 4: Add Classes in "PopUp.css" and include it in Default.aspx in the following way:

.popUpOverlay
{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #000000;
    opacity: .15;
    filter: alpha(opacity=15);
    -moz-opacity: .15;
    z-index: 101;
    display: none;
}
.popUpWindowToOpen
{
    top: 0px;
    display: none;
    position: fixed;
    min-height: 100px;
    min-width: 300px;
    background-color: #ffffff;
    border: 1px solid #293955;
    padding: 0px 0px 12px 0px;
    z-index: 102;
    font-family: sans-serif;
    font-size: 13pt;
    font-weight: lighter;
    color: #293955;
    border-radius: 5px;
    letter-spacing: 0.6px;
}

.popUpTitle
{
    height: 20px;
    border-radius: 5px 5px 0 0;
    background-color: #EEEEEE;
    color: #293955;
    padding: 5px 5px 5px 20px;
}

.closeButton
{
    float: right;
}
.button
{
    background-color: #293955;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}
.padding20
{
    padding: 20px;
}

<link href="PopUp.css" rel="stylesheet" type="text/css" />

Step 5: Insert Script for Opening, Closing and Centering Popup in "PopUp.js" and include it in Default.aspx

$(document).ready(function () {
    $('#openPopUp').click(function () {
        OpenPopUpWindow('popUpWindow');
    });
    $('#closePopUp').click(function () {
        ClosePopUpWindow('popUpWindow');
    });
});

function OpenPopUpWindow(windowId) {
    $("#overlay").show();
    centerPopupWindow("overlay", windowId);
    $("#" + windowId).fadeIn(300);
}

function ClosePopUpWindow(windowId) {
    $("#overlay").hide();
    $("#" + windowId).fadeOut(300);
}

function centerPopupWindow(backgroundDivId, actualDivId) {
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $("#" + actualDivId).height();
    var popupWidth = $("#" + actualDivId).width();
    $("#" + actualDivId).css({
        "position": "absolute",
        "top": windowHeight / 2 - popupHeight / 2,
        "left": windowWidth / 2 - popupWidth / 2
    });
    $("#" + backgroundDivId).css({
        "height": windowHeight
    });
}

<script src="PopUp.js" type="text/javascript"></script>

Step 6: Run the application to see the Button on Default.aspx as:

Step 7: Click on the Button to Open PopUp and you will see it as:

HaPpY sCrIpTiNg...!|!