[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文件----使用页面都需要引用 ~~~ <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/> ~~~