JQuery Dialog (JS modal window, DIV that can be dragged)

　　Call

　　Interaction

As shown in, this is basically the complete logical process of JQueryDialog.
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. in OK (), I used FCKEditor for reference, as shown in the following code:

JS Code

Copy to ClipboardReference: [www.bkjia.com] var JQueryDialog = {
/// <Summary> submit </summary>
/// <Remark> </remark>
OK: function (){
Var frm = $ ("# jd_iframe ");
If (frm [0]. contentWindow. OK ()){
JqueryDialog. Close ();
}
Else {
Frm [0]. focus ();
}
}
};

Therefore, the function OK must be defined for each subpage from Iframe to Dialog for the parent window to be called, and true or false is returned to notify the parent window whether the Dialog is closed.

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:

Copy to ClipboardReference: [www.bkjia.com] var JQueryDialog = {
/// <Summary> submission completed </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 (valid when the closing dialog box is true) </param>
SubmitCompleted: function (alertMsg, isCloseDialog, isRefreshPage ){
If ($. trim (alertMsg). length> 0 ){
Alert (alertMsg );
}
If (isCloseDialog ){
JqueryDialog. Close ();
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 on 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 for its source code again and have 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)

Author: Wu Jian blog: http://wu-jian.cnblogs.com/

Download DEMO: Click to download