artDialog是一个轻巧且高度兼容的JavaScript对话框组件，可让你的网页交互拥有桌面软件般的用户体验。
功能： 支持锁定屏幕(遮罩)、模拟alert和confirm、多窗口弹出、静止定位、支持Ese键关闭对话框、定时关闭、自定义位置、拖动、鼠标调节窗口大小、换肤……
优点
1. 兼容主流浏览器: 支持IE6和IE6+, Firefox, chrome, Opera, Safari
2. 自适应内容: 无需预设高宽, 对话框自适应消息内容的大小 (包括按钮)，并且支持消息框大小拖动调节
3.智能消息对齐: 如果设置了对话框宽度，文本会自动居中或者居左对齐
4.容错: 如果定义的宽度高度小于内容大小不会出现错位
5.智能定位: 使用自定义坐标的时候智能修正位置，确保其在可视范围 (适用于弹出菜单)
6.拖动流畅: 不会粘住鼠标也不会拖出浏览器视口导致无法控制
7.轻巧: js压缩后不到8KB (在js内嵌了核心兼容布局CSS的情况下)
8.制订皮肤: 九宫格布局, 钩子完善,制作皮肤相当简易, 内置IE6 png 32透明和定位解决方案。
9.IE6无抖动静止定位: 在IE6下可实现与现代浏览器一样完美静止定位效果
10.IE6遮盖下拉控件支持: 支持 IE6 下覆盖下拉控件 (注:半透明皮肤不支持)
配置参数
content: {消息内容,支持HTML}
title: {标题.默认:"提示"}
lock: {是否锁定屏幕. 默认:false}
width: {宽度,支持em等单位. 默认:"auto"}
height: {高度,支持em等单位. 默认:"auto"}
url: {iframe地址,存在content参数时候,此参数无效}
x: {x坐标,可以使用关键字,如:left/right/center. 默认:"center"}
y: {y坐标,可以使用关键字,如:top/bottom/center. 默认:"center"(并非绝对垂直居中，而是使用的黄金比例)}
fixed: {是否启用静止定位. 默认:false}
time: {多少秒自动关闭}
style: {对话框风格扩展参数,写入自定义className,详情见皮肤css文件的定义,多个用空格隔开}
yesText: {确定按钮文本. 默认:"确定"}
noText: {取消按钮文本. 默认:"取消"}
yesClose: {点击确定按钮是否同时关闭对话框. 默认:true}
id: {给对话框定义id,对话框未关闭就不再会有同名对话框弹出. 例如定义id为"my2"，则内容容器id为"my2Content"}
形式
使用
需要引用两个js文件----使用页面都需要引用
<script type="text/javascript" src="__PUBLIC__/js/artDialog/artDialog.js"></script> <script type="text/javascript" src="__PUBLIC__/js/artDialog/iframeTools.js"></script>
artDialog实现子窗口向父元素传递数据
在页面A点击按钮，弹出artDialog窗口B，当关闭窗口B时，实现向父元素A传递数据。
方法一
利用artdialog中的data方法进行传值与接收值。
在子窗口调用：artDialog.data("变量名"，变量值) 进行传值；
在父元素调用：art.dialog.data("变量名") 进行接收值； //可能需要在artDialog的close方法中
方法二
B窗口
function commitSave() {
var ajxxUuid = jQuery("#grid_ajxx").jqGrid("getGridParam","selrow"); //获取值
var nsrmc = $("#grid_ajxx").jqGrid("getCell",ajxxUuid,"xaAy.nsrmc"); //获取值
if(ajxxUuid) {
artDialog.data("ajxxUuid", ajxxUuid); //将值存起来，供父页面读取
artDialog.data("nsrmc", nsrmc);
art.dialog.close();
}else {
showTopMsg("请选中一行再提交！", 4000, "error");
return false;
}
}
A页面
function chooseAj() {
url = "{:U("organ/Mechanism/select_user",array("post_id"=>$post["id"]))}"; //需要弹出的页面路径
art.dialog.open(url, {
id: "ajxxList",
title: "案件信息",
width: 650,
height: 460,
left: "50%",
top: "50%",
background: "#000000",
opacity: 0.1,
lock: true,
resize: false,
close: function () {
var ajxxUuid = art.dialog.data("ajxxUuid"); // 读取子窗口返回的数据
var nsrmc = art.dialog.data("nsrmc"); // 读取子窗口返回的数据
if (ajxxUuid !== undefined){
document.getElementById("ajxxUuid").value = ajxxUuid; //赋值到页面A的input以显示出来
document.getElementById("nsrmc").value = nsrmc;
}
}
},
false);
}
artDialog其他调用实例
A
function a(){
art.dialog({content:"hello world!历史"})
}
B
function b(){
art.dialog({
content:"欢迎你来到对话框世界！",
lock:true,
style:"succeed noClose"
},
function(){
alert("你点了确定"); //不管点了确定还是取消默认都会关闭artdialog，除非在这里面返回false
},
function(){
alert("你点了取消");
});
}
C
function c(){
art.dialog({
title:"图片查看",
fixed:true,
content:"<img width="817" height="479" src="butterfly.jpg" />"
});
//return false;
};
D
function d(){
// art.dialog({title:"dialog内嵌iframe", iframe:"http://www.baidu.com", width:"900", height:"500"});
//已经没有了直接的iframe属性 通过下面的方式内嵌iframe 第二种效果不佳
art.dialog.open("http://www.baidu.com", {width: 320, height: 400});
// art.dialog({title:"dialog内嵌iframe", width:"900px",height:"500px", content:"<iframe align="right" src="http://www.baidu.com" width:"100%" height:"100%" />"});
return false;
};
E
function e(){
art.dialog(
{
title:"动画",
fixed:true,
content:"<embed src="ddd.rm" type="audio/x-pn-realaudio-plugin" autostart="true" width="420" height="363"></embed>"
});
}; //播放avi总是只有声音，没有画面，哎！
F
function f(){
art.dialog({content:"你人品稳定么？", fixed:true, yesText:"我很稳定", style:"confirm", id:"bnt4_test"},
function(){
art.dialog({id:"bnt4_test"}).content("你骗人！");
return false;//这样对话框才不会关闭
},
function(){alert("你是坏人");}//按右上角的叉关闭对话框也会执行这个函数
);
};
G
function g(){
art.dialog({mouse:true, id:"dg_test34243", content:"您收到 <strong>2</strong> 条消息",left:"right",width:"15em", top:"bottom", fixed:true});
};
H
function h(){
art.dialog({id:"dg_test34243"}).close();
};
I
function i(){
var _this = document.getElementById("btn7");
if (document.getElementById("menu_4834783")) {//如果已经打开了对话框，按这个按钮还能把它关闭
art.dialog({id:"menu_4834783"}).close();
_this.innerHTML = "弹出菜单"; //button上显示的内容
return;
};
art.dialog({id:"menu_4834783", title:"菜单", content:"请输入：<input style="width:200px;" id="M_dfd" type="text" value="hello world!" />",
button:[{name:"确定",callback:function(){
var a=document.getElementById("M_dfd").value;
art.dialog({content:a, lock:true, time:1});
}
},
{name:"关闭我",callback:function(){_this.innerHTML = "弹出菜单";}}
]
}
);
_this.innerHTML = "关闭菜单";
return false;
};
A-I对应的弹窗类型
<input type="button" style="width: 100px" onClick="a()" value="最简单的对话框"/><br/>
<button id="btn0" onClick="b()">基本示例</button><br/>
<button id="btn1" onClick="c()">显示图片</button><br/>
<button id="btn2" onClick="d()">外部页面</button><br/>
<button id="btn3" onClick="e()">视频</button><br/>
<button id="btn4" onClick="f()">询问</button><br/>
<button id="btn5" onClick="g()">广告</button>
<button id="btn6" onClick="h()">关闭</button><br/>
<button id="btn7" onClick="i()">弹出菜单</button><br/>