How to create jquery custom popup window

Jquery

Posted on 30 Dec 15 by Vickey
  1231



For show popup window there are many plugins and library like 'thickbox' , 'simple model' etc. But here I am creating a custom popup window which can easily update and modify.In this popup window I am using jquery. Lets first write html part of the popup

<div style="display: none;" id="overlay" class="pop_window_overlay"></div>
<div style="display: none;" id="dialog" class="pop_window">
 	<table cellpadding="3" cellspacing="0" style="width:100%;">
		<tbody>
			<tr>
                <td class="pop_window_title">Welcome!</td>
                <td class="pop_window_title align_right">
                    <a href="#" id="close_button">Close</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

This is the html part which will be show as a popup window. For use jquery events we need to load jquery so first load jquery library and then use the below javascript code

$(document).ready(function ()
{
	show_popup();
	$("#close_button").click(function (e)
	{
		hide_popup();
	});
});

function hide_popup()
{
    $("#overlay").hide();
    $("#dialog").fadeOut(300);
}

function show_popup()
{
    $("#overlay").show();
    $("#dialog").fadeIn(300);
    $("#overlay").click(function (e)
    {
        hide_popup();
    });
}

Here i am loading popup window on window load you can load it on a button click.

And now we need to add css 

.pop_window_overlay
{
   
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    opacity: .15;
    filter: alpha(opacity=15);
    -moz-opacity: .15;
    z-index: 101;
    display: none;
}
.pop_window
{
    display: none;
    position: fixed;
    width: 380px;
    height: 144px;
    top: 50%;
    left: 50%;
    margin-left: -190px;
    margin-top: -100px;
    background-color: #ffffff;
    border: 2px solid #ccc;
    padding: 0px;
    z-index: 102;
    font-family: Verdana;
    font-size: 10pt;
}
.pop_window_title
{
    border-bottom: solid 2px #ccc;
    background-color: #ccc;
    padding: 4px;
    color: #333333;
    font-weight:bold;
}
.pop_window_title a
{
    color: #333333;
    text-decoration: none;
}
.align_right
{
    text-align: right;
}

congratulation you have created your custom popup window now you can change color or style according to your theme


If this post help you reduce time to develop, you can help me to maintain this website :)
www.000webhost.com