Simple dialog (popup) using jQuery February 18, 2013

In this tutorial i'll show you how to create a simple jquery dialog using jquery, css, html.

This tutorial use jQuery, you need add jQuery library:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

1. Html design

<div id="bt_click">Click me!</div>

<div id="dlog_out"></div>
<div id="dlog_in">
 <div id="dlog_close"></div>
    Demo content
</div>

- bt_click use to test this
- dlog_out is full screen black background
- dlog_in is the dialog

2. CSS

#bt_click {
 cursor:pointer; 
}

#dlog_out {
 position:fixed;
 background:#999;
 width:100%;
 height:100%;
 cursor: no-drop;
 opacity:0.5;
 top:0;
 left:0;
 display:none;
}
#dlog_in {
 border:5px solid #666;
 border-radius: 5px 5px 5px 5px;
 position:fixed;
 z-index:1000;
 background:#FFF;
 display:none;
}
#dlog_close {
 background: url(x.png) no-repeat;
 width: 25px;
 height: 29px;
 display: inline;
 z-index: 3200;
 position: absolute;
 top: -15px;
 right: -16px;
 cursor: pointer;
}

3. JS

var dlog_w = 400;      // Dialog width
var dlog_h = 300;      // Dialog height
var dlog_p = 5;      // Dialog padding
var out_click_close = false;   // Close dialog when click background

$("#bt_click").click(function (){
 ShowDialog();
});

$("#dlog_close").click(function (){
 HideDialog();
});

if(out_click_close == true) {
 $("#dlog_out").css('cursor', 'pointer');
 $("#dlog_out").click(function (){
  HideDialog();
 });
}

window.onresize = function(event) {
 ShowDialog();
}


function ShowDialog()
{
 var w = GetWidth();
 var h = GetHeight();
 var left_size = 0, top_size = 0;
 // Config
 $("#dlog_in").css('width', dlog_w);
 $("#dlog_in").css('height', dlog_h);
 // .floor(x)
 left_size = Math.floor( (w-dlog_w - dlog_p)/2 );
 top_size = Math.floor( (h-dlog_h - dlog_p - 10)/2 );
 $("#dlog_in").css('padding', dlog_p);
 $("#dlog_in").css('left', left_size);
 $("#dlog_in").css('top', top_size);
 // Showup
 $("#dlog_in").fadeIn();
 $("#dlog_out").fadeIn();
}

function HideDialog()
{
 $("#dlog_in").fadeOut();
 $("#dlog_out").fadeOut();
}
 
function GetWidth()
{
 var x = 0;
 if (self.innerHeight) {
    x = self.innerWidth;
 }
 else if (document.documentElement && document.documentElement.clientHeight) {
    x = document.documentElement.clientWidth;
 }
 else if (document.body) {
    x = document.body.clientWidth;
 }
 return x;
}

function GetHeight()
{
 var y = 0;
 if (self.innerHeight) {
    y = self.innerHeight;
 }
 else if (document.documentElement && document.documentElement.clientHeight) {
    y = document.documentElement.clientHeight;
 }
 else if (document.body) {
    y = document.body.clientHeight;
 }
 return y;
}

- Look at top of this script you can see some dialog config
- GetWidth() and GetHeight() use to get you screen width and height
- ShowDialog() to show dlog_in and dlog_out
- HideDialog() to hide dlog_in and dlog_out
- At code window.onresize use to reopen dialog when you change browser width or height

4. Download
Download source and image: click here