When the page scrolls with the scroll bar fixed to the center of the screen, the modal dialog box contains two kinds of contents, one is the iframe introduction, the other is the HTML statement insertion. In the Web site development is very common, the use of the plug-in is very simple. Look at the effect of the operation.
Plug-in use
1, the first introduction of the style file, the detailed code is as follows:
<link href= "Images/blue/css.css" rel= "stylesheet" type= "Text/css" id= "Showdialogcss"/>
Inside the ID must not forget that he is used to switch the skin of the plugin.
2, then the introduction of jquery js file, the specific code is as follows:
<script src= "Js/jquery.js" ></script>
3, the last Introduction of modal dialog box plug-ins, the specific code is as follows:
<script src= "Js/dialog.js" ></script>
4, write for the click of the HTML code, the specific code is as follows:
<div id= "Diagx" > Click Me--Modal dialog </div>
5, write JavaScript code, for the id "diagx" div-Binding Order Mode dialog box, the specific code as shown below
Copy Code code as follows:
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ (' #diagx '). ShowDialog ({
Width: "500",//modal dialog box breadth 500px
Height: "300",//Mode dialog 300px
Title: modal dialog box,//The caption on the modal dialog
Skin: "Blue",//modal dialog box There are three kinds of skin styles 1, blue;2, Red;3, Geen.
Frameurl: "http://www.baidu.com/",//iframe connection address when Contentflag equals 0 o'clock, it works.
Contentflag: "0", the//modal dialog box shows iframe or HTML content marked 0 is iframe;1 is HTML content
Contents: The HTML content displayed in the <div> test data </div>//modal dialog box
});
});
</script>
The default parameter for the plug-in also has the transparency default value "0.2" for the Intopacity Representation Mode dialog background (that is, the entire page mask layer). The entire HTML code for the whole example looks like this:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<link href= "Images/blue/css.css" rel= "stylesheet" type= "Text/css" id= "Showdialogcss"/>
<script src= "Js/jquery.js" ></script>
<script src= "Js/dialog.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ (' #diagx '). ShowDialog ({
Width: "500",
Height: "300",
Title: modal dialog box,
Skin: "Blue",
Frameurl: "http://www.baidu.com/",
Contentflag: "0",
Contents: "<div> test Data </div>"
});
});
</script>
<title> Mode dialog Box </title>
<body>
<div id= "Diagx" > Click Me--Modal dialog </div>
</body>
When the code runs, if we click the div layer with id "DIAGX", the modal dialog box pops up.
The source code of the plugin can download in the following, welcome everybody to download use, and improve, don't forget to notice me after the improvement, I also raise a bit. Thank you.
Package Download Address
