jQuery Dialog 弹出层对话框插件

2020-05-23 06:26:46易采站长站整理

});

z-index
为了能实现多个对话框并存,采用了一个静态的zIndex变量,每次创建新对话框时,都实现一次自增操作,并将新值赋值给新创建的对话框的z-index,这样就能保证最后创建的对话框总在最前面。
对外接口
插件通过以下的方式调用:

var dlg = new Dialog(content, options);
dlg.show();当然如果只是一般的使用,可以更简单一些:
new Dialog(content, options).show();
// 或是
dialog(content, options);还可以通过以下四个函数,对插件进行进一步的控制:

show():显示对话框
hide():隐藏对话框,但并不删除对话框内的内容。
close():关闭对话框,彻底删除其内容。
setContent(content):改变对话框内的内容。
构造函数的参数
构造函数有两个参数。content和options。content表示对话框的内容;options表示对话框的各个配置选项。
content可以是一个字符串,表示显示的内容。或是一个Object类型,若是Object类型,则需要包含以下两个属性:type和value。type表示数据类型,而value则是type对应的内容。type接受以下几种类型:
id:显示某一ID的内容,但并不包含此ID本身的内容。value对应为某一HTML元素的ID值。
img:显示一张图片。value对应为图片的uri。
url:通过ajax方式显示某一URL的内容,所以必需要在同一域名下。value为对应的URL地址。
iframe:将一URL指定的内容显示到iframe中,它去除了AJAX调用的一些限制(相同域名,返回的HTML代码中不能包含head头等。)。value为对应的URL。
options则是对Dialog行为和外观的具体设置:














































选项
名称描述默认值
title标题栏的文本标题
closeText关闭按钮文字[关闭]
showTitle是否显示标题栏,若为否,则标题和关闭按钮都将不显示。true
draggable是否可以拖动框体。true
modal模态对话框,若为是,则不可操作背景层。true
center是否居中显示,若为否,则通过CSS中的内容进行定位。true
fixed对话框是否跟随滚动条移动。true
time自动关闭对话框时间,单位毫秒,若为0,表示不会自动关闭。0
id对话框的ID。若为false,则表示自动产生。false
回调函数