Home > Developer > JavaScript
When a page is scrolling, the scroll bar is fixed in the center of the screen. There are two types of content in the mode dialog box: iframe introduction and HTML statement insertion. This plug-in is very common in website development and is very simple to use. Let's take a look at the running effect.
Plug-in usage
1. first introduce the style file. The detailed code is as follows:
<Link href = "images/blue/css.css" rel = "stylesheet" type = "text/css" id = "showdialogcss"/>
Do not forget the id in it. It is used to switch the plug-in skin.
2. Introduce the jQuery js file. The specific code is as follows:
<Script src = "js/jquery. js"> </script>
3. Introduce the mode dialog box plug-in. The Code is as follows:
<Script src = "js/dialog. js"> </script>
4. Compile the HTML code for clicking. The specific code is as follows:
<Div id = "diagx"> click I-mode dialog box </div>
5. Compile the JavaScript code and bind the click mode dialog box to the div with the id of "diagx". The Code is as follows:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ('# Diagx'). ShowDialog ({
Width: "500", // The Width of the mode dialog box is PX.
Height: "300", // pattern dialog box 300px
Title: "Mode dialog box", // the Title on the Mode dialog box
Skin: "blue", // there are three kinds of skin styles in the mode dialog box: 1. blue; 2. red; 3. geen.
FrameURL: "http://www.baidu.com/", // iframe connection address only works when ContentFlag is equal to 0
ContentFlag: "0", // The iframe or HTML content is displayed in the mode dialog box. The value 0 indicates iframe; the value 1 indicates HTML content.
Contents: "<div> test data </div>" // HTML content displayed in the mode dialog box
});
});
</Script>
The default parameter of this plug-in is "Intopacity", indicating the transparency of the mode dialog background (that is, the entire page mask layer). The default value is "0.2 ". The entire example contains the following HTML code:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<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: "Mode dialog box ",
Skin: "blue ",
FrameURL: "http://www.baidu.com /",
ContentFlag: "0 ",
Contents: "<div> test data </div>"
});
});
</Script>
<Title> mode dialog box </title>
</Head>
<Body>
<Div id = "diagx"> click I-mode dialog box </div>
</Body>
</Html>
When the code is running, if we click the div layer with id "diagx", the mode dialog box is displayed.
The source code of the plug-in can be downloaded as follows. You are welcome to download, use, and improve the plug-in. Do not forget to inform me of the improvements. I also want to improve it. Thank you.
Package
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
