jQuery study notes (2)--Using jquery to implement various modal prompt box codes and project structures_jquery

I have wanted to implement a modal frame for a long time. I have looked for a lot of jquery plug-ins, but I have not found one that I am satisfied with. This time I met one, but because it is still in the development stage, there is not even a document API. It took me a long time to figure it out.

Let’s take a look at the code first. I looked at the source code and customized the effect I wanted:

Copy the code The code is as follows :

<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
< ;!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">







< ;script type="text/javascript"src="./js/cn.js">

Basic
Extended
Spinner
Alert
< ;button class="dlgDemoBtn"action="confirm">Confirm
Customize

The entire project structure is shown in the figure below:

Among them, the css folder and the images folder contain the required css files and pictures, while the js folder contains the required js files. Don’t look at so many, there are many functions in the future that require these files to implement the model. The dynamic prompt box is just one of the small functions, that is, the file in the magicDialog folder.

OK, run the dialogDemo.jsp file, the page will look like this:

Post some effects!

Click "Basic":

Click "Spinner":

Click "Customize":

Overall, it’s a pretty good plug-in. It works fine when tested under IE9 and Chrome browsers. However, the pop-up box supports dragging under Chrome browser, but not under IE9.

For specific source files, please refer to the official website: http://boarsoft.com/cn/. There are many other examples in it. I will try them one by one in the future.

This is the result of my study. Reprinting is allowed and communication is welcome, but the link address of this article must be given before reprinting