Creating a modal message box in jQuery

One of the common tasks of web developers is to develop and design their site according to its purpose. And in-order for their sites to look more professional, the theme of the site, the animations, banners, buttons, fonts, links should be uniform. For example the font of a link button must be the same with the font of the content.

In this article, I am going to show you how to create a modal dialog using jQuery instead of showing the usual pop-up message of your web browser. First lets take a look at the common way of doing it.

The usual style.

<script language=”javascript” type=”text/javascript”>

function ShowModalBox() {

alert(“The common box”);

}

</script>

<input type=”button” value=”Show Modal Box” onclick=”ShowModalBox();” />

The output.

second

The jQuery way of  doing it.

<script language=”javascript” type=”text/javascript”>
$().ready(function() {
$(“#btnShowModalBox”).click(function() {

$(“#Container”).css(“visibility”,”visible”);
$(“#Container”).css(“float”,”none”);
$(“#Container”).css(“position”,”absolute”);
$(“#Container”).css(“left”,0);
$(“#Container”).css(“top”,0);
$(“#Container”).css(“width”,window.screen.width);
$(“#Container”).css(“height”,window.screen.height);
$(“#Container”).css(“background-color”,”#555555″);
$(“#Container”).css(“opacity”,”0.5″);

var left = window.screen.width / 2 – 200;
var top = window.screen.height / 2 – 300;
$(“#PopupBox”).css(“visibility”,”visible”);
$(“#PopupBox”).css(“float”,”none”);
$(“#PopupBox”).css(“position”,”absolute”);
$(“#PopupBox”).css(“left”,left);
$(“#PopupBox”).css(“top”,top);

});
$(“#btnClose”).click(function() {
$(“#PopupBox”).css(“visibility”,”hidden”);
$(“#Container”).css(“visibility”,”hidden”);
});
});
</script>

<body style=”margin: 50px; font-family: Verdana; font-size: 11px; font-weight: bold;”>
<form id=”form1″ runat=”server”>
<div style=”float: left; position: relative; width: 100%;”>
<input type=”button” id=”btnShowModalBox” value=”Show Modal Box” />
</div>
<div id=”PopupBox” style=”width: 400px; height: 300px; visibility: hidden; z-index: 1;”>
<div style=”float: left; position: relative; height: 20px; background-color: navy;
width: 365px; color: #ffffff; padding-left:5px; padding-top:5px;”>
JQuery Modal Dialog
</div>
<div style=”float: left; position: relative; height: 20px; background-color: navy;
width: 30px; color: #ffffff; padding-top:5px; text-align:center;”>
<input type=”button” id=”btnClose” value=”x” style=”border-style:solid; border-width:1px; background-color:#ffffff; height:15px; padding:0px; cursor:pointer;” />
</div>
<div style=”float: left; position: relative; background-color: #ffffff; width: 400px;
height: 150px;text-align: center; vertical-align:middle;”>
This is how to implement a simple Modal Dialog
</div>
</div>
<div id=”Container” style=”visibility: hidden; z-index: 0;”>
</div>
</form>
</body>

The output.

jqueryoutput

If you’ll notice there is now a gray background on top of our page where our dialog box is aligned in the middle.

How did we achieve that?

I. We must first create our dialog box.

jqueryoutputBox

Here is the code for the message box.

<body style=”margin: 50px; font-family: Verdana; font-size: 11px; font-weight: bold;”>
<form id=”form1″ runat=”server”>
<div style=”float: left; position: relative; width: 100%;”>
<input type=”button” id=”btnShowModalBox” value=”Show Modal Box” />
</div>
<div id=”PopupBox” style=”width: 400px; height: 300px; visibility: hidden; z-index: 1;”>
<div style=”float: left; position: relative; height: 20px; background-color: navy;
width: 365px; color: #ffffff; padding-left:5px; padding-top:5px;”>
JQuery Modal Dialog
</div>
<div style=”float: left; position: relative; height: 20px; background-color: navy;
width: 30px; color: #ffffff; padding-top:5px; text-align:center;”>
<input type=”button” id=”btnClose” value=”x” style=”border-style:solid; border-width:1px; background-color:#ffffff; height:15px; padding:0px; cursor:pointer;” />
</div>
<div style=”float: left; position: relative; background-color: #ffffff; width: 400px;
height: 150px;text-align: center; vertical-align:middle;”>
This is how to implement a simple Modal Dialog
</div>
</div>

<div id=”Container” style=”visibility: hidden; z-index: 0;”>
</div>
</form>
</body>

II. Then our gray background which will cover the entire page.

<body style=”margin: 50px; font-family: Verdana; font-size: 11px; font-weight: bold;”>
<form id=”form1″ runat=”server”>
<div style=”float: left; position: relative; width: 100%;”>
<input type=”button” id=”btnShowModalBox” value=”Show Modal Box” />
</div>
<div id=”PopupBox” style=”width: 400px; height: 300px; visibility: hidden; z-index: 1;”>
<div style=”float: left; position: relative; height: 20px; background-color: navy;
width: 365px; color: #ffffff; padding-left:5px; padding-top:5px;”>
JQuery Modal Dialog
</div>
<div style=”float: left; position: relative; height: 20px; background-color: navy;
width: 30px; color: #ffffff; padding-top:5px; text-align:center;”>
<input type=”button” id=”btnClose” value=”x” style=”border-style:solid; border-width:1px; background-color:#ffffff; height:15px; padding:0px; cursor:pointer;” />
</div>
<div style=”float: left; position: relative; background-color: #ffffff; width: 400px;
height: 150px;text-align: center; vertical-align:middle;”>
This is how to implement a simple Modal Dialog
</div>
</div>

<div id=”Container” style=”visibility: hidden; z-index: 0;”>
</div>

</form>
</body>

III. Finally our jQuery Code

// jQuery has a simple statement that checks the document and waits until it’s ready to be manipulated, known as the ready event

$().ready(function() {

}

//Then we assign a click event for our btnShowModalBox button

$().ready(function() {
$(“#btnShowModalBox”).click(function() {

});

});

//Then we manipulate the position,visibility, width and height of our gray message box container.

$(“#Container”).css(“visibility”,”visible”); -> sets the visibility of our div to visible which is initially hidden.
$(“#Container”).css(“float”,”none”);  -> sets the float property
$(“#Container”).css(“position”,”absolute”); -> sets the position and assign aabsolute value
$(“#Container”).css(“left”,0);  -> sets the left property
$(“#Container”).css(“top”,0); -> sets the top property
$(“#Container”).css(“width”,window.screen.width); -> sets the width of our div
$(“#Container”).css(“height”,window.screen.height); -> sets the height of our div
$(“#Container”).css(“background-color”,”#555555″); -> sets the background color
$(“#Container”).css(“opacity”,”0.5″); -> sets the opacity of our gray background to half

//And then we show our message box

var left = window.screen.width / 2 – 200;
var top = window.screen.height / 2 – 300;
$(“#PopupBox”).css(“visibility”,”visible”);
$(“#PopupBox”).css(“float”,”none”);
$(“#PopupBox”).css(“position”,”absolute”);
$(“#PopupBox”).css(“left”,left);
$(“#PopupBox”).css(“top”,top);

//Finally to hide our box we assign a click event to our button located on the upper right-most of the message box.

$(“#btnClose”).click(function() {
$(“#PopupBox”).css(“visibility”,”hidden”); -> hides the messagebox
$(“#Container”).css(“visibility”,”hidden”);-> hides the gray area
});

And that is how we create a simple modal message box using jQuery.  You can even make the message box fade by using the bellow function in jQuery.

$("#PopupBox").fadeIn("slow");
Advertisements

2 thoughts on “Creating a modal message box in jQuery

Add yours

  1. I have been exploring for a little bit for any high quality articles
    or weblog posts in this kind of house . Exploring in Yahoo
    I ultimately stumbled upon this web site.
    Reading this info So i am satisfied to exhibit
    that I have a very just right uncanny feeling I discovered exactly what I needed.
    I such a lot unquestionably will make certain to don?
    t forget this website and give it a glance regularly.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

Up ↑

%d bloggers like this: