JQuery Dialog自定义模态窗口控件

有一位js大神吴剑曾经写过一个JQuery Dialog(JS模态窗口,可拖拽的DIV)，这个东西在我做记事日历时帮了我很大的忙，这是他写的一个自定义弹窗的控件，使用者可以下载demo并且根据自己的需要更改，十分方便。现在最新版本是他2012-08-08更新的2.0.5版，我为了解决模态窗口问题也研究了很长时间他写的代码，非常好，在这里简要分析一下它的代码，希望可以给这个控件的使用者带来便利！虽然js模态窗口还是推荐用Modal,但是吴剑写的这个功能也够用，相比之下，就是界面差一点，但自定义性比较强。

首先介绍找到这款控件的方法，非常简单。

百度一下：JQuery Dialog自定义模态窗口控件。

第一个就是。如图

点击进入。吴剑的博客。

先看控件展示，控件的效果，当然，弹窗内容是可以自定义的。

话不多说，下载demo，让小编给大家分析一下代码。当然，小编的实力较弱，比不上吴剑大神，分析代码也只是介绍一下自定义时更改的地方，顺便膜拜一下大神。

吴剑博客上说明，介绍他的代码要说明出处，可是百度经验上不允许放链接，所以我放一张版权截图。此控件版权归吴剑大神所有，小编只是介绍一下用法。

下载demo后，小编先介绍一下里面的东西。

如图1，这里是demo的所有文件。

接下来简单介绍文件的用途。

介绍如图。

打开default.html的源代码。小编来简要介绍一下。

其他都不用看，只管input的onclick事件就行了。

onclick事件是JqueryDialog.Open1（）和JqueryDialog.Open（）函数。

JqueryDialog.Open1（）打开的窗口没有底部。

而JqueryDialog.Open（）有。除此之外，两者没有区别。建议用JqueryDialog.Open1（），自己设置底部，因为原来的太丑。

什么是底部，看截图。

两个函数的参数都是四个（1.弹窗title。2.弹出内容文件路径。3.宽度。4.高度）

重要的是2.详细讲讲。

现在打开js,也就是jquery_dialog.js。这里包含了所有js代码。这是最重要的！！

一开始的一部分是一些初始参数，可以修改。建议自己改动。

再往下就是刚才的JqueryDialog.Open1（）和JqueryDialog.Open（）方法，当然只是个调用其他函数的中转过程。实现的函数还在下边，往下看。

看见这一堆了吗？由于js排版问题，没法看。小编教你个办法。

百度一下：js格式化。将代码格式化一下，再粘贴回来，这下好多了。好了，能看了。

最主要的东西都在init里面。仔细研究这个。在init里，用append（）和css（）设置了整个弹窗的顶端、底部，以及弹窗位置，可拖动等等东西。

这里说明一些你可能需要改的地方：

1.关闭标示。就是弹窗右上角的“X”，个人觉得不好，不如换成图片。更换方法截了张图。以防你看不清，代码在第11步（只替换那一句）

src里是图片路径，之所以加上鼠标事件是可以形成动态图片的效果。要不然太单调。记得把最上边的cCloseText改成空字符串。

_jd_dialog_m_h.append("

id='#jd_dialog_m_h_rr' style='float:right;'

onclick='JqueryDialog.Close();'

onmouseover=this.src='文件2路径'

onmouseout=this.src='文件1路径' />");

鼠标移动上去显示文件2，其他时间显示文件1

2.弹出框路径，这个在你移动文件更新链接时，js里的路径一定要更改！否则弹窗内容就找不到。如图.

如果你js格式化是按照我的方法做的话，代码在103行。iframeSrc就是你调用函数时传过来的第二个参数，要求前面的内容加上这个组成整个正确的路径，建议把前面改为空，这样文件路径就和你设置的参数一样了。

3.如果你js格式化是按照我的方法做的话，init结束在115行。如图。

也就是Close函数的上边。Close函数不用动，关闭功能没什么要改的。

4.OK()这个函数看着改，意思是你的弹窗内容完成时（比如说弹出是表单，提交时）。焦点可以改一改。再加一些东西，插入数据库什么的。

5.SubmitCompleted（）和SubmitCompletedl（）这两个差不多。

SubmitCompleted（）三个参数分别是：弹出信息、是否关闭窗口、是否刷新页面。

SubmitCompletedl（）的参数是：弹出信息、跳转页面地址。

这两个函数在回执页面（serverPost1.html）被调用。

6.最后一部分你基本不用动，DragAndDrop（）。控制弹窗位置，根据吴剑大神的标题，本插件的最大特色：可拖动Div。就是在这里完成的。

接下来就是inner页面了，也就是编辑弹窗内容的页面，你可以在这里编辑你想编辑的一切。比如说：一个表单。（一般模态窗口不就是这东西吗。）

有个需要注意的地方，就是ok（）函数，这个页面一定要有，以供父页面调用

展示一下小编做日历时自己编辑的模态窗口，表单用的bootstrap做的，但关闭按钮找不到漂亮的、合适的，随便找了一个搁上去了。

基本到这里，所有文件就介绍结束了，css没说，因为css你觉得不好就改吧，那是美工的事，小编不感兴趣。

再一次感谢吴剑大神的控件，也在这里倡导吴剑大神的开源精神，正是有了许许多多吴剑大神这样习惯开源的高手，程序界才能快速发展起来，未来才会变得越来越好。小编不是否定不开源，商业软件当然不开源，但是钱不代表一切，有时生活中还有其他许多远高于钱的东西。

说了这么多，如果你还在看，小编真要感谢你了。总之，小编只想让自己的经验可以帮到你，当然也是记录下小编学习js的过程。如果有不懂的可以联系小编，百度账号就是小编的qq。