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.
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.
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.
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"); 
工具 
帮助
