artDialog弹窗-页面传值
最后更新于：2022-04-01 23:49:58
[TOC]
# artDialog使用说明
> 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文件----使用页面都需要引用
~~~
~~~
### 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:'
'
});
//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:""});
return false;
};
~~~
#### **E**
~~~
function e(){
art.dialog(
{
title:'动画',
fixed:true,
content:''
});
}; //播放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:'您收到 2 条消息',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:'请输入：',
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对应的弹窗类型**
~~~
~~~
';
'
});
//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:""});
return false;
};
~~~
#### **E**
~~~
function e(){
art.dialog(
{
title:'动画',
fixed:true,
content:''
});
}; //播放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:'您收到 2 条消息',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:'请输入：',
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对应的弹窗类型**
~~~
~~~