jquery ui dialog封装.docVIP

自己封装了一个JQuery UI Dialog的插件，这样就可以很方便的使用模态窗口了。先把代码post上来。后续说明再添加上去。我这里面加入了一个拖动事件，原因是有的页面会禁止鼠标选择页面文本和鼠标右键的功能，这会影响到窗口的拖动效果。所以不得已只好自己重新实现一个拖动效果，如果不需要的话可以自行去掉。 http://www.chihoo.me/archives/87 //模态窗口插件 (function($) { $.Dialog = { option: { title: dialog, height: 300, width: 500, modal: true, resizable: false, external: true, draggable: true }, open: function(url, dlgid, options) { var op = $.extend({}, $.Dialog.option, options); var draggable = op.draggable; op.draggable = false; //关闭ui.dialog的默认拖动事件，改用自定义事件draggable dlgid += new Date().getTime(); // 加入当前时间戳，建立动态ID避免ID冲突 var tempDialog = document.getElementById(dlgid); if (tempDialog != undefined tempDialog != null) { $dialog = $(tempDialog); } else { $body = $(body); $div = $(div style=padding:0; overflow:hidden;/div); $div.attr(id, dlgid); $body.append($div); $dialog = $(# + dlgid); } if (op.external) { var iframeWidth = parseInt(op.width) - 10; var iframeHeight = parseInt(op.height); iframe = $(iframe).attr({ src: url, frameborder: 0, marginwidth: 0, marginheight: 0 }) .css({ width: iframeWidth + px, height: iframeHeight + px, margin: 5px }); $dialog.html(iframe); } else { //嵌入html alert(不支持external: false的模式); } $dialog.dialog(op); $dialog.height(parseInt(op.height) - $($dialog).siblings(.ui-dialog-titlebar).outerHeight()); iframe.height(parseInt(op.height) - $($dialog).siblings(.ui-dialog-titlebar).outerHeight()); if (op.param) $dialog.data(param, op.param); $dialog.data(dlgid + callback, options.callba