Home > Web Front-end > JS Tutorial > body text

jquery modal dialog ultimate version implementation code_jquery

WBOY
Release: 2016-05-16 18:45:39
Original
1046 people have browsed it

When the page scrolls, as the scroll bar is fixed in the center of the screen, there are two types of content in the modal dialog box, one is the introduction of iframe, and the other is the insertion of HTML statements. It is very commonly used in website development, and using this plug-in is very simple. Let’s take a look at the running effect.

Plug-in usage
1. First introduce the style file, the detailed code is as follows:

Don’t forget the id inside, it is used to switch the plug-in skin.
2. Then introduce the js file of jQuery. The specific code is as follows:

3. Finally, introduce the modal dialog plug-in. The specific code is as follows:

4. Write the HTML code for click. The specific code is as follows:

Click me--modal dialog box

5. Write JavaScript code to bind a click modal dialog box to the div with the id of "diagx". The specific code is as follows

Copy code The code is as follows:



The default parameters of this plug-in and the transparency of the Intopacity representation mode dialog background (that is, the entire page mask layer) are " 0.2". The entire HTML code for the entire example is as follows:
Copy the code The code is as follows:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">







Modal dialog


Click me--modal dialog




When this code is running, if we click the div layer with the id "diagx" a modal dialog box will pop up.
The source code of the plug-in can be downloaded as follows. You are welcome to download and use it, and make improvements. Don’t forget to notify me after improvements, and I will also improve it. Thanks.
Package download address
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template