Jquery Dialog (JS modal window, div that can be dragged)

Jquery Dialog (JS modal window, div that can be dragged)

Wu jian2012-08-08

OriginalArticle, Reprint must indicate the source: http://www.cnblogs.com/wu-jian/

 

 

 

Call

 

Interaction

 

As shown in, this is basically the complete logical process of jquerydialog.

 

0. Open a modal window through the jquerydialog. open () function. The content of the modal window is actually an independent page, which is embedded into IFRAME.

 

1. When you click the "Submit" button in the modal window, call the jquerydialog. OK () function, which corresponds to the event submitted by the user.

 

2. In the concept of OO, jquerydialog. OK () is actually a virtual function. Its logic is encapsulated in the subwindow contentWindow. OK (). I used FCKeditor for reference, as shown below:CodeAs shown in:

VaRJquerydialog ={///<Summary> submit </Summary>///<Remark> </remark>OK:Function(){VaRFRM = $ ("# jd_iframe"); Frm [0]. ContentWindow. OK (); frm [0]. Focus ();}};
 

Therefore, the function OK must be defined for each subpage from IFRAME to Dialog for the parent window to call.

3. Generally, contentWindow contains the processing logic of the server. This requires post to interact with the server, because contentWindow does not contain the "Submit" button, therefore, if post is required, it must be in contentWindow. OK.

4. Finally, the server logic execution is complete, and the control must be handed back to the dialog. Therefore, I encapsulated jquerydialog. submitcompleted (), which contains three parameters for dialog to perform final logic processing: whether to bring up the message and message content, whether to close the dialog, and whether to refresh the parent window. This function also benefits from FCKeditor, as shown below:

 JS Code  VaR Jquerydialog = {  //  /<Summary> submit complete (whether to bring up the dialog box; whether to close the subwindow; Whether to refresh the parent page) </Summary>      //  /<Param name = "alertmsg"> the prompt is displayed. If the value is null, the prompt is not displayed. </param>      //  /<Param name = "isclosedialog"> whether to close the dialog box </param>      // /<Param name = "isrefreshpage"> whether to refresh the page </param> Submitcompleted: Function  (Alertmsg, isclosedialog, isrefreshpage ){  //  Dialog Box          If ($. Trim (alertmsg). length> 0 ) {Alert (alertmsg );}  //  Close the modal window          If  (Isclosedialog) {jquerydialog. Close ();}  //  Refresh page         If  (Isrefreshpage) {window. Location. href = Window. Location. href ;}}}; 

 

5. Result response, presented to the user.

 

Development log

The JS modal window will be captured on the net. After some reference, I decided to include this in one of my many "original projects, after all, windows are frequently used in Web development. From the version release log, it can be seen that this item has been repaired and supplemented for some time. It is basically an initial version, but I will continue to improve it, in the process, I had the opportunity to refer to the frameworks of jquery, FCKeditor and other large JS projects, and gained a lot of benefits. At the same time, I once again realized the compatibility and debugging difficulties of JS multi-browser, but why? Enjoy it.

Let's talk about the implementation of the project: first, it is based on the floating Div. Then, for the IFRAME subpage, using IFRAME is the most convenient for both users and developers. The content of the modal window is the content of the subpage, and the switching of the modal window is the switching of the subpage, enter the URL addresses of different subpages to open the modal window of different content. The final part of the framework structure is some processing details, such as the relationship between subpage events and mode window close. This is a great help from FCKeditor and I have referred to its implementation, you can view detailed code in the demo. Some common Dom methods are encapsulated for multi-browser compatibility, and some custom configurations, such as border color and background color, are added. At the same time, for ease of use, CSS is all used to achieve the effect, and images are not used in the project.

OK, as mentioned above, this is a relatively basic version. I will continue to improve it later. You are welcome to use it and provide valuable suggestions. (Wu Jian)

--------------------------------------------------------

Recently I made a project mainly based on the client, jquery + JSON, and wrote nearly four thousand lines of JS Code. Although the project was handed over before it was completed, it began to become fond of jquery and decided to change the project to jquerydialog.

In this update, the Code is fully based on the jquery framework and the namespace is applied to make JS look so Oo and the client ID is modified, add the JD _ prefix to avoid conflicts. Modify the drag-and-drop core function and support multiple browsers. Finally, an example of interaction between the client and the server is added to the demo. You are welcome to download and use it. (Wu Jian, 11-011-05)

-------------------------------------------------------

I always felt that the drag and drop operation was not smooth enough and decided to completely solve the problem. I checked a lot of information these days and finally found the problem: Because I used IFRAME, when I moved the mouse over IFRAME, mousemove event lost. You can try the demo. After the modification, the drag and drop operations are completely smooth, and I also separated a draganddrop class to implement drag and drop operations. I have to thank FCKeditor again.Source codeI learned a lot about it. I watched the news a few days ago. FCKeditor restructured the code and launched the Mac-style ckeditor. I have been studying fck, I believe that I will write an article on FCKeditor source code analysis in a short time.

OK, 2.0.1 optimizes core drag and drop operations, fixes dialog location, mouse style, and other bugs, adds custom style configuration items, and optimizes jquery cache. (Wu Jian, 2009-12-13)

-------------------------------------------------------

Upgrade jquery to 1.4 and fix the two bugs of event registration. (Wu Jian, 2010-01-18)

-------------------------------------------------------

Added internal extensions for the open method and fixed some display bugs in IE6. (Wu Jian, 2010-02-03)

 

-------------------------------------------------------

 

I haven't updated it for a long time. Thank you for your feedback on the bug.

The jquery version has been upgraded to solve the bug that the embedded page control cannot obtain the focus,

Solved the bug of other script errors caused by calling the close method in IE. (Wu Jian)

 

Release

 

JS Code

/* **************************************** ************************************
[Author]
WU Jian http://wu-jian.cnblogs.com/

[Version update]
: Version 1.0.1 was released.
: Version 1.0.2 updated some obvious bugs and completely supported the IE series browsers.
: Version 1.0.3 encapsulates the standard DOM, is compatible with multiple browsers, styles are beautifying, and shadow effects are added.
: Version 2.0.0 is based on the new jquery encapsulation. It applies the JS namespace to avoid client ID conflicts.
The project was officially renamed jquery dialog, optimized the core implementation of drag and drop, and fully supported cross-browser.
: Version 2.0.1 optimized the drag-and-drop of the core Algorithm To separate the draganddrop class.
Fixed the bug where the mouse dragged too fast and the dialog paused.
Fixed the bug when the dialog width or height is higher than the page.
Fixed the inaccurate mouse style and drag-and-drop control area bug.
Added configuration items and optimized jquery cache.
2010-01-18: Version 2.0.2, jquery upgraded to 1.4.
2010-02-03: Version 2.0.3 adds an internal extension for the open () method and fixes some display bugs in IE6. : Version 2.0.5 solves the bug that the embedded page control cannot obtain the focus, and solves the script bug of the close method.
**************************************** ************************************ */

 

Download demo

Click to download

 

<Full text>

 

author: Wu Jian
Source: http://www.cnblogs.com/wu-jian/
the copyright of this article belongs to the author and blog Park, welcome to reprint, but must indicate the source, and provide the original article connection clearly on the Article Page, otherwise, the right to pursue legal liability will be retained.