jquery对话框插件-白红宇

jquery对话框插件

阅读量：6154 次

发布时间：2019-06-21

本文共 4700 字，大约阅读时间需要 15 分钟。

http://www.0773linji.com/jquery_plugs/jq_dialog/

演示一

$("#openBox").click(function(){ $.dialog.open({ title: 'Hello World!', drag:true }); });

打开

演示二

$("#openBox2").click(function(){ $.dialog.alert('你确定要上传图片吗？',function(){alert('关闭');}); });

打开

演示三

$("#openBox3").click(function(){ $.dialog.open({ title: 'Hello World!', width:200, drag:true }); });

打开

相关代码

 (function($) { 
 $.extend({ 
     
 dialog:function(options){ 
     
 //默认配置
 var defaults = { 
     
 //对话框ID
 id: false, 
 //消息内容
 content: "弹出框内容区",
 //确定按钮文本
 okValue: '确定',
 //取消按钮文本
 cancelValue: '取消', 
 //标题
 title: "标题区",
 //内容宽度
 width: "auto",
 //内容高度
 height: "auto",
 //是否锁屏
 lock: true,
 //是否拖动
 drag:false 
 }; 
 var config = $.extend(defaults, options);
 config.id = config.id ? config.id : new Date().getTime();
 //插入DOM
 var dom = $('<div id="' + config.id + '">' + $.dialog.templates + '</div>').hide(); 
 dom.css({'position': 'absolute', 'z-index': '9999'});
 $("body").append(dom); 
 /**
 * 初始化设置
 */
 this.init = function () { 
 this.dom = dom;
 this.config = config;
 dom.find('.openDialog_buttons').hide();
 //设置内容 
 this.content(config.content);
 //设置标题
 this.title(config.title);
 //设置尺寸
 this.size(config.width, config.height);
 //设置居中
 this.position();
 //设置锁屏
 if (config.lock) { 
     
 this.lock();
 }
 if(config.drag)
 { 
     
 //拖拽支持
 var mouse = {x:0, y:0}; 
 function drag(event) { 
     
 var e = window.event || event;
 var top = parseInt(dom.css('top')) + (e.clientY - mouse.y);
 var left = parseInt(dom.css('left')) + (e.clientX - mouse.x);
 dom.css({top:top,left:left});
 mouse.x = e.clientX;
 mouse.y = e.clientY;
 }
 dom.find(".openDialog_header").mousedown(function(event){ 
     
 var e = window.event || event; 
 mouse.x = e.clientX;
 mouse.y = e.clientY;
 $(document).bind('mousemove', drag);
 });
 $(document).mouseup(function(event){ 
     
 $(document).unbind('mousemove', drag);
 });
 }
 //监听事件
 dom.find(".openDialog_close").bind("click", this.close); 
 config.id = false;
 }
 /**
 * 打开对话框
 */
 this.open = function () { 
     
 this.init(); 
 dom.fadeIn(); 
 }
 /**
 * 设置内容
 * @param {String} 内容
 */
 this.content = function (message) { 
     
 if (typeof message === "string") { 
     
 dom.find(".openDialog_main").html(message);
 }
 }
 /**
 * 设置标题
 * @param {String, Boolean} 标题内容. 为 false 则隐藏标题栏
 */
 this.title = function (content) { 
     
 if (content === false) { 
     
 dom.find(".openDialog_header").hide();
 dom.find(".openDialog_title").html('')
 } else { 
     
 dom.find(".openDialog_header").show();
 dom.find(".openDialog_title").html(content)
 };
 }
 /**
 * 位置居中
 */
 this.position = function () { 
     
 var left = ($(window).width() - dom.outerWidth()) / 2.0;
 var top = ($(window).height() - dom.outerHeight()) /3.0;
 dom.css({ 
     
 top: top + $(document).scrollTop(), 
 left: left + $(document).scrollLeft()
 });
 }
 /**
 * 尺寸
 * @param {Number, String} 宽度
 * @param {Number, String} 高度
 */
 this.size = function (width, height) { 
     
 if (typeof width === "number") { 
     
 width = width + "px";
 };
 if (typeof height === "number") { 
     
 height = height + "px";
 };
 dom.find(".openDialog_main").css("width", width);
 dom.find(".openDialog_main").css("height", height);
 }
 /**
 * 显示对话框
 */
 this.visible = function () { 
     
 dom.css("visibility", "visible");
 }
 /**
 * 隐藏对话框
 */
 this.hidden = function () { 
     
 dom.css("visibility", "hidden");
 }
 /**
 * 关闭对话框
 */
 this.close = function () { 
     
 dom.fadeOut("slow", function(){ 
     
 $(this).remove();
 }); 
 $(".openDialog_mask").remove();
 } 
 /**
 * 锁屏
 */
 this.lock=function(){ 
 $("body").append('<div id="' + this.config.id + '" class="openDialog_mask"></div>');
 $(".openDialog_mask").css({ 
     
 'z-index': '8888',
 "left":"0px",
 "top":"0px",
 "width":"100%",
 "height":'100%', 
 'display': 'block'
 }); 
 }; 
 } 
 });
 /**
 * HTML模板
 */
 $.dialog.templates = 
 '<div class="openDialog">'
 + '<table class="openDialog_border" border="0" cellspacing="0" cellpadding="0">'
 + '<tbody>'
 + '<tr>'
 + '<td class="openDialog_header">'
 + '<div class="openDialog_title">Title</div>'
 + '<a class="openDialog_close" href="javascript:">[关闭]</a>'
 + '</td>'
 + '</tr>'
 + '<tr>'
 + '<td class="openDialog_main">'
 + '</td>'
 + '</tr>'
 + '<tr>'
 + '<td class="openDialog_footer">'
 + '<div class="openDialog_buttons"></div>'
 + '</td>'
 + '</tr>'
 + '</tbody>'
 + '</table>'
 +'</div>'; 
 /*窗口对象展现方法集合*/
 $.dialog.open = function(options){ 
     
 var dialog = new $.dialog(options);
 dialog.init(); 
 dialog.dom.fadeIn(); 
 return dialog;
 };
 $.dialog.alert = function(content, callback){ 
     
 var dialog = new $.dialog({ 
     
 id: 'Alert',
 lock: true,
 content: content
 });
 dialog.init(); 
 $('#Alert').find('.openDialog_buttons').append('<input class="openDialog_button" type="button" value="' + dialog.config.okValue + '">');
 dialog.dom.find('.openDialog_buttons').show();
 dialog.dom.fadeIn(); 
 $('.openDialog_button').bind('click',callback);
 $('.openDialog_button').bind('click',dialog.close);
 return dialog;
 }; 
 })(jQuery);