发布:javascript对话框组件artDialog v2 先留个言
4 四 2010
artDialog是一个轻巧且高度兼容的javascript对话框组件，可让你的网页交互拥有桌面软件般的用户体验。
演示地址:artDialog猛击前往
项目主页:http://code.google.com/p/artdialog/
artDialog2采用全新的UI
功能： 支持锁定屏幕(遮罩)、模拟alert和confirm、多窗口弹出、静止定位、支持Ese键关闭对话框、定时关闭、自定义位置、拖动、鼠标调节窗口大小、换肤……
优点
- 兼容主流浏览器: 支持IE6和IE6+, Firefox, chrome, Opera, Safari
- 自适应内容: 无需预设高宽, 对话框自适应消息内容的大小 (包括按钮)，并且支持消息框大小拖动调节
- 智能消息对齐: 如果设置了对话框宽度，文本会自动居中或者居左对齐
- 容错: 如果定义的宽度高度小于内容大小不会出现错位,
- 智能定位: 使用自定义坐标的时候智能修正位置，确保其在可视范围 (适用于弹出菜单)
- 拖动流畅: 不会粘住鼠标也不会拖出浏览器视口导致无法控制
- 轻巧: js压缩后不到8KB (在js内嵌了核心兼容布局CSS的情况下)
- 制订皮肤: 九宫格布局, 钩子完善,制作皮肤相当简易, 内置IE6 png 32透明和定位解决方案。
- IE6无抖动静止定位: 在IE6下可实现与现代浏览器一样完美静止定位效果
- IE6遮盖下拉控件支持: 支持 IE6 下覆盖下拉控件 (注:半透明皮肤不支持)
artDialog 兼容布局设计思路
还是大学的时候就对对弹出层和lightBox特效的着迷，记得那个时候下载过百度贴吧的弹出层类，支持遮罩与对话框半透明投影。打开分析看到里面布满了CSS教科书上传说、且邪恶的table，于是乎我第一反应就是把里面的结构改了，改成DIV+CSS的，最后压缩成17KB大小，弄完后自然很得意。后来我发现我修改后的对话框经常出现错位等问题，而原作却不会出现。由于当时对XTHML理解不是很透彻，后来也就把这个事儿给忘记了。
现在由于项目需要，我得做交互相关的工作，但是一直没有找到自己满意的对话框类。网上那些对话框功能强大的就设计过度，或者要依赖于第三方框架，总之以我现在的水平是无法完全读懂其代码的，只知道其JS布满了解决浏览器兼容的条件判断，我甚至无法为它制作一个满意的风格。
后来我就自己写了这个对话框组件，在这里我把自己的设计思路说明下：
由于XHML结构是写在js里面的，XHTML完全是用于样式表现，所以我们没有必要听从WEB标准老师的教诲，尽量选择适合表现的XHTML标签。显然table（表格）的特性用于此是再好不过了：超强容错能力、高度宽度自适应内容、带有布局，浏览器对其理解得很透彻（尤其是IE）。这也说明了开头我说的百度的对话框不会错位的特性。
下面就是artDialog的XHTML结构图:
对话框从div.ui_dialog_wrap开始，里面分别套用了两个table，最外层的table是九宫格布局，用来支持圆角皮肤的，里面的table.ui_dialog_main是装载消息内容的（包括标题、内容、按钮），其中js设置的高度与宽度就应用在table.ui_dialog_main里面的一个td（单元格）上面，这样外层的table就会随着table.ui_dialog_main变化而自动伸展。由于表格的特性，内容如果超出td的高度宽度，td会自动调整大小的，所以不用担消息内容被截取了。
artDialog支持多窗口弹出，每一个div.ui_dialog_wrap里面都带有一个用于遮罩的div.ui_overlay，而实际的遮罩层却是里面的div，我们可以在css里面设置div的颜色与透明度，外层的div.ui_overlay用于js执行透明渐变。div.ui_overlay弹出的时候高度与高度都设置为100%并且使用绝对定位，div.ui_dialog_wrap则使用了静止定位‘position: fixed’，也就是说遮罩只覆盖浏览器视口，没有像网上同类的对话框组件覆盖了整个页面（有人说页面过高会导致ie8透明滤镜失效）。IE6不支持’position: fixed’属性，下面给出CSS解决方案：
width: 100%; height: 100%; position: absolute; left: expression(documentElement.scrollLeft + documentElement.clientWidth – this.offsetWidth); top: expression(documentElement.scrollTop + documentElement.clientHeight – this.offsetHeight);
可以看到CSS应用了微软专属的HTA技术，div.ui_dialog_wrap 在IE6应用的是绝对定位，left与top由HTA动态改变。虽然网上很多文章说HTA不要使用，会严重消耗性能，但是我认为这个说法并不是绝对的，我在在IE6测试artDialog静止定位拖动滚动条消耗的性能几乎为零（但是在其他HTA应用确实比较消耗资源），况且静止定位只是一个表现形式而已，不是很重要。无论是css嵌入js与原生的js改变top与left同样会让div.ui_dialog_wrap抖动，因为每一次改变ie6都重新渲染一次，但是ie6却有一个有意思的特性，如果在body或者html设置一个静止定位的背景，div.ui_dialog_wrap就不会闪动了，完全模拟‘position: fixed’！考虑html标签很少用来做背景，我们可以这样写：
background:url(*) fixed
如果父元素拥有了定位属性，那子元素的top与left绝对定位也就相对于父元素，所以ie6 此时div.ui_dialog_wrap下的对话框——div.ui_dialog也就静止了。
IE6还有一个臭名昭著的bug：你如论设置多大的z-index都没有办法把select（下拉控件）无法遮盖，网上资料显示其权限比较高，同时也提到了iframe（嵌入式窗口）比select更高（iframe可以遮盖），只要在层下面放一个与其同等大小的z-index=-1的iframe就可以覆盖select了，所以我在div.ui_dialog放了一个巨大的的iframe，并且给div.ui_dialog设置了’overflow:hidden’，省得js又为了这一点点小事情去搞实地测量。当然我最后这个功能因为应用ie6的透明皮肤而妥协了（默认皮肤的css就隐藏了这个iframe），ie6应用了Png透明修复后下面却由这个iframe挡着，所谓鱼和熊掌不可兼得，要美丽就得付出代价，否则你就老实的针对IE6制作png 8位或者gif全透明的皮肤把。
好了，最重要的东西已经解说完毕，更细致的技巧可以查看js和_doc目录中的css文档。如果有更好的兼容方案欢迎提出。如果发现问题或者建议请给我发电子邮件。如果你对代码进行了优化，那也请您不吝给我一份吧，让它变得更好。
下载：http://code.google.com/p/artdialog/downloads/list
artDialog本身并不能获取内容，鉴于近日收到很多兄弟的留言询问此，不太熟悉js的朋友可以下载蓝色理想论坛讨论贴的附件看看
http://bbs.blueidea.com/viewthread.php?tid=2980170&page=1&extra=page%3D1
153 Responses for "发布:javascript对话框组件artDialog v2"
-
-
guoyl 说：
请教一下弹出框高度问题
art.dialog({title:’更多’, content:$(‘wTag’).innerHTML,width:’740′,height:’200′,lock:false,id:’wmoretag’,yesText:’关闭’},function(){},function(){})
能不能设置超过固定高度后出现滚动条啊？
像art.dialog({title:’更多’, iframe:’http://www.g.cn’, width:’740′, height:’500′,id:’more2′,yesText:’关闭’},function(){},function(){})一样
谢谢-
这个。。您难倒我了，本来自适应内容是artDialog的优势，现在要整一个不适应的功能的会让我很纠结的。。。你可以这样：content参数传入一个带高度的div，然后给这个div设置样式内容溢出后滚动条自动。这样就简单的解决了需求，我想这个需求你应该不是到处都要使用吧？
-
-
smart 说：
在IE6里面
onclick=”artDialog({id:’dmsg6′,title:’百度’, url:’http://www.baidu.com’, width:300, height:310});”弹出一直是Loading…
不出内容。请指教下-
我把这个
onclick=”artDialog({id:’dmsg6′,title:’百度’, url:’http://www.baidu.com’, width:300, height:310});”
写在<a标记 里面不行要是直接加在
botton或者img标题里在IE6就可以。
-
-
如何在外部链接url的代码里加一个按钮。可以关闭对话框
-
-
-
onclick=”window.top.art.dialog({id:’testIframe’}).close(); return false”
-
-
-
-
无计 说：
为什么我调用时在Chrome6.0下拖动滚动条或滚动鼠标滚轮会出现弹出框抖动的情况？奇怪的是访问你这个页面时弹出的演示却没有这个情况，但是在下载的demo页面里会出现抖动。而且懂得很厉害，会大面积的消失，除非我ctrl+a全选一下它才会重新出现。
-
博主我已经解决了，用你解决IE6的办法解决的。奇怪了Chrome居然也有在这种问题。
-
-
wpg 说：
博主，我采用锁屏，但是我按下键盘上的backspace键后页面后退，这时候弹出层就失效啦。我试了了给锁屏方法加上后退锁定，但是当是content引用时表单输入后就退不了，iframe引用倒可以。
我的环境是在iframe引用页面中弹出对话框、点后退时iframe引用的页面就会后退。
-
-
博主，如果我把弹出层的大小设置在了，缩小浏览器的时候超出可视范围了，能不能在哪个地方判断一下大小如果超出可视范围就默认最大为可视范围，设置的大小无效呀
-
学习 说：
这个怎么调用啊，我不会，LZ帮帮忙啊，我QQ751754857
-
我在网上查了一些相关资料说是iframe之间跨域问题造成的，是不是弹出层的.data.iframe没有考滤到document.domain这种获取。原码我还在研究中，不知道博主有遇到过类似这种问题或已有解决方案
-
我所在环境是单域情况，不存在跨域，这现象也是偶尔出现，有的时候点保存表单点了十几次都不会报错，但有时候点一两次就报错。我把得到的弹出层iframe对象得到，打印出这个对象的domain，就会出现有时候得不到有时候又可以得到。
-
-
博主，今天又遇到了一个奇怪的问题，我用弹出层，里面引用的是一个iframe表单页面，提交的时候报了一个没有权限访问，不知道是什么原因。
-
楼主，IE8下iframe调用close()时报的$_iframe_style为空这个问题怎么样解决能不能提供一下思路。
-
路人甲 说：
组件的弹出窗口不能及时的移除
-
chenxu 说：
请问在新弹出的页面中，如何在后台关闭它 啊，我看了老长时间了，就是不会关闭。
-
Martin 说：
能够在弹出框上面设置关闭按钮不显示吗？
-
[...] 转载自：Plane Art http://www.planeart.cn/?p=713 [...]
-
博主，请问一下你的下一个新版本什么时候放出代码。
-
www.crazy1in.tk 说：
厉害呀。crazy1in.tk
-
哈哈，又有一个，我看我该去搞测试啦：）
在博主提供的DEMO里就可以看到，看锁屏那个例子，弹出第二个层时去激活第一个层，这时第二个层就激活不了啦 -
又定位出一个问题，IE8下发报出这个BUG，iframe引用页面调用close()方法时，会报$_iframe_style为空，我看了一下源代码，发现是close()方法把iframe置空后又重新调用了加载方法（这个地方不应该再去调用加载，不知道博主是出于什么原因。）。我觉这个地方有点逻辑问题。
-
博主，又出了一个奇怪问题，定位了一早上才发现是在CSS里定义了一个全局的a {noFocusLine:expression(this.onFocus=this.blur());}
这句话会造成IE7下第二次弹出层（第一次弹出时正常，点右上角的小X关闭）时引用的iframe页面中input会变成不可编辑状态。我查了半天也没有查出来跟源码的中的close有什么冲突，但在博主提供的DEMO里试了也是这样。-
-
这个BUG很好重现的，你就在调用的页面的样式里加上
a {noFocusLine:expression(this.onFocus=this.blur());}
这句话就可以啦，然后点击弹出层，这回input是可以编辑的，点击右上角的X关闭弹出层，现点击弹出这个层，这时候input就变成不可编辑啦。这个问题也很奇怪，a标签的控制怎么会影响到input -
深蓝心语 说：
我的开发类似经验告诉我，其实是iframe没删除掉造成的。。。貌似是。
-
-
-
还有一个问题就是content的内容为空的时候，弹出层叠出不来，但遮罩层出来啦
-
-
我content调用的是后台数据库里返回来的值，如果返回的是空值就不显示层，但遮罩层会出来，就是整页面黑了
-
-
-
博主，又遇到了问题，iframe传参过长在IE8下会导致内存泄漏。
-
-
这个问题我也搞不懂是啥原因，因为我iframe里引用的url都是在后台带有参数传进去的，上回在IE８下就报了内存泄漏。别的浏览器倒没有发现。相当奇怪
-
-
-
博主你好，我遇到一个问题，就是在IE6下用锁屏或定位效果都会造成页面中的元素串动，能不能只要有锁屏功能，在IE6下就不要遮罩效果，感觉是遮罩影响的
-
yanhang 说：
这个组件非常不错，但是在使用时发现一个小问题：
当我为对话框中的内容设置一个下拉框的时候，发现没有显示，代码如下：
art.dialog(
{
content: “测试”,
lock: true
},
function()
{},
function()
{}
);
当将lock设置成false后，下拉框可以出现这里想问下，lock为true时，为何不能显示下拉框？
-
发现了一个小BUG，就是连续调用的时候，出现窗口无法close···
-
caicai 说：
用ESC可以退出
-
stanford 说：
你好，这几在项目中测试又提出了一个BUG，就是content里只要有这种特殊符号就显示不出来。好像是被判断成html标签啦。这个有没有办法解决window.top.art.dialog({content:”});
-
这里也不让发左右括号呀，就是有左右括号的都出不来
-
-
sealong 说：
应用“错误或成功”样式时，消息过长 在其他皮肤下，会导致 文字穿过错误图标，显示出来，不太美观！
-
还有一个问题，这个弹出层叠有没有提供固定不让拖动的开关
-
你好，最近在项目使用中有这么一个问题，就是我一个弹出层用了锁屏功能，这个层中有一个FORM表单，我现在是在点击确定按钮后会关闭该层并同时弹出一个alert对话框，点击对话框中的按钮我再让页面弹出刚才的层，但这个时候弹出来的层就没有锁屏效果啦。不知道是什么原因！
-
ya 说：
我想请教一下关闭窗口后怎么让页面刷新啊？
-
ya 说：
我在使用iframe嵌套子页面,然后在子页面关闭父页面的弹出层的时候 网页左下角报错了
行: 503字符: 7
错误: ‘$._iframe.style’ is null or not an object
-
-
子页面调用的对象是存在的,也能关闭父页面的层,但是关闭后就显示有错误
-
-
-
请问一下怎么我加window.top.art….
就弹出来了啊-
少打了个字,是弹不出来哈
-
-
twoer476 说：
如果让小对话框也垂直剧中？
top: {y坐标,可以使用关键字,如:’top’、’bottom’. 默认:居中(注: 小对话框采用黄金比例垂直居中)}
不需要黄金比率!
-
top:(document.body.clientHeight-设置的高度)/2
先这样吧！
-
-
对头！
-
-
-
-
撒旦法 说：
报告!发现个小bug.ie 6下 ,锁屏和menuBtn同时用会冲突 .
没有锁屏的效果了~~
报告完毕
请问大侠怎么解决,小弟实在是不会 -
你好，我在应用中如果在弹出层中想有三个按钮，能加上去吗，目前只有确定和取消满足不了要求
-
-
CoffeeX 说：
我在参数里设置了三个按钮，不过不是content参数，而是用iframe参数调用一个页面，现在第三个按钮取消，想要关闭这个弹出层，不知该如何实现，请大侠赐教，不胜感激！！
-
-
-
zytse 说：
gb2312下有问题么？
-
GB2312下打开Iframe，IE6下老停留在那个loading.gif那里，而不显示页面
-
-
新版去掉了parent参数，那我想弹出层在父窗口弹出，得用什么方法，能举个例子吗？谢谢
-
已经解决。刚仔细看文档知道用原生方法，哈哈
-
你好！这个组件的最新版大概要什么时候放代码
-
km3945 说：
建议出一个IE6不使用滤镜的版本.
滤镜会带来严重的效率问题.漂亮只能+分.但不能打分.不值当.
-
loading 换为图片的时候不居中怎么办
文字可以
小弟这样做的
var l_w=$ce(‘div’);
l_w.innerHTML=”;
_loading_tip.appendChild(l_w);
这样做可以吗
小弟实在是没解决了-
artDialog(
{
id:”load”,
content:’ ‘,
:”aaaa”,
lock:true,
style:’succeed noClose’
}
);
补充个个小疑问
小弟这样显示 个load 图标gif格式
可是 显示出来却不懂了呢,就停留在第一个帧上
-
-
-
zengzheng 说：
我想问下，我在使用傲游浏览器时（实际是IE6），拖动窗体，有时候会页面崩溃，然后傲游就拦截了这个页面崩溃. 这个怎么解决哦。
-
另外在问下，V2.10版本在下载地方怎么没有，发布了吗，呵呵
-
-
都有的，所有版本都有这问题，不过还好，好像是aero这个皮肤时，才会出现拖动窗体，造成页面崩溃的问题，其他几个皮肤还暂时没出现。
-
-
-
testBoy 说：
你好！如何打开个多个同一窗体
-
你好，如何动态打开多个同一窗体！
-
lynzz 说：
这是我看到的，国内比较全面的对话框，强烈支持，一定要好好去研究下
-
月下兮 说：
请问一下,不能取得隐藏层里面的元素的值该怎么操作呢？
我的代码：var innerhtm=document.getElementById(“forlogin”).innerHTML;
artDialog({title:’用户登陆’,content:innerhtm}, function(){loadlogin1();});
我在loadlogin1()函数里面验证数据,但是始终获取不到值,楼主可要帮我啊!
-
-
var innerhtm=document.getElementById(“forlogin”).innerHTML;
是能取到值,但是使用弹出框 artDialog({title:’用户登陆’,content:innerhtm}, function(){loadlogin1();});
在确认函数中读取不到文本框的值。
-
-
那个问题已经解决了其实直接用ID.value就可以读到值,我还有个问题请教一下哈.就是在弹出层点击确定按钮之后 弹出另一个层的同时原来那个弹出层不消失怎么做呢？
-
回调函数返回false即可，如：
artDialog({content:’hello world!’}, function(){
artDialog({content:’再问候世界一下’});
return false;//返回false可以让点击确定不关闭
})
-
-
-
试了一下 artDialog({title:’用户登陆’,content:innerhtm}, function(){alert(innerhtm);});这样也取不到值
-
不好意思,那个能弹出来,就只是取不到文本框值
-
-
-
-
kyalong 说：
iframe拖拽时，一旦鼠标移动较快移到iframe上面，拖拽就会失效，就会变“卡”，因
此建议拖拽iframe时，当鼠标抓取时（mousedown）可将iframe隐藏，mouseup时显示
iframe，这样拖动就不会“卡”了
为了展示效果好，可以模拟一个半透明层效果来代替iframe的位置和形状 -
lLLL 说：
按esc关闭不错
希望对话框弹出后焦点在“关闭”上 这样 按空格键就可以关闭对话框 -
勤奋的懒汉 说：
看演示页面里，遮罩时隐藏了右侧的滚动条，使得页面内容出现左右平移，能否不去掉垂直滚动条添加遮罩效果呢？
-
111111111 说：
其他都不错 就是带锁屏时应该加一个开关 可以忽略动画，不锁屏时点击按钮 会弹出多个一样的弹出框
-
lijun 说：
onclick=”artDialog({url:’reg.html’})” 在reg.html里怎么加关闭artDialog的链接， 我试了很多方法都不成功。
点击此处返回首页也不行 -
您好，在弹出的artDialog里，点击关闭弹出层的代码怎么写？谢谢!
-
-
能不能给个完整的例子， 在iframe.html里面增加一个关闭artDialog的链接。
还有怎么获取到父级页面的元素内容，parentNode似乎获取不到
-
-
-
Love JavaScript 说：
IETest下的6.0测试了没通过喔
-
leisang 说：
你好，我想问下怎样在外部调用dialog关闭函数？
比如我弹出一张图片，我想直接点击图片就关闭。 -
留言 说：
感谢分享这么美好的东东。~
-
作者你好，很不错的效果。
在使用中我遇到一个问题：表单验证时，弹出提示信息，我继续回车，继续弹出提示信息，且覆盖在原有弹出信息之前，……。如何在弹出alert信息后，将焦点定位在“确定”上面，这样，我回车的时候，就关闭了弹出的提示信息呢？ -
feelrain 说：
f.setAttribute(‘frameBorder’,0);
在创建iframe时加上这句,要不IE里会有边框在引用页面有这个的CSS时 “TD{height:20}”
会影响到弹出层的样式再一个我看到里弹出层里有两个iframe
不知道另一个是做什么用的
能给说明一下吗 -
[...] 本文仅供爱好者学习，原文来自http://www.planeart.cn/?p=713 « 上一篇：爱情小记-铭记 [...]
-
wuyu 说：
hello!good!
-
水淼 说：
我想请问一下，锁屏的时候有个透明的黑色背景是渐渐的显示出来的，关闭的时候也是渐渐的关闭的，请问这个时间可不可以控制，在哪里设置？
-
karson 说：
在结合jquery使用的时候会有问题，例如jquery中这样写
$(function(){
artDialog({content:’您今天看起来太漂亮了！’, style:’succeed’}, function(){
setTimeout(function(){
artDialog({title:’ ‘, content:’达成共识’,time:3, lock:true});
}, 100);
});
});
弹出框就不居中的了。
还有就是在框架页面中使用的时候会出现找不到对象的问题。
artDialog非常不错，如果能出一个jquery版，就更好了。-
恩，回头我在仔细研究下dom就绪就立即弹出的问题。
框架页面支持应该不成问题吧，我可以在iframe子页面调用父页面的对话框
window.parent.artDialog({content:’hello world’});
-
-
-
最简单的方法就是url参数
artDialog({url:’http://www.google.com’});如果需要用ajax调用，那就把数据附加到content参数，我一般用jQuery配合
-
windii 说：
你好，感谢分享哈，我调用的是外部的表单页，外部表单页提交后，如何关闭弹出窗口？
artDialog({title:’用户体验调查’, url:’http://www.c365.org/do/form.php?mid=10′, width:515, height:390});-
-
里面的参数没有定义的移除方法吧？唐兄能否给个小小的Tips.
-
index页定义了id:2312，在index弹出窗口，窗口引用了远程的表单，表单提交的时候会有提示，提示页中我加close:2312，这样么？
-
如何移除哪？
-
-
-
-
-
萧水寒 说：
如何让弹出页面中隐藏的DIV呢？
-
首先获取隐藏div的数据，然后在以content参数传递过去，如：
html代码：
<div id="hideContent" style="display:none">
<p>我是隐藏的内容</p>
</div>javascript代码：
var html = document.getElementById(‘hideContent’).innerHTML;
artDialog({content:html});
-
-
-
-
hexj 
首先谢谢博主这么优秀的插件，呵呵。不过我这里有个问题：
在iframe页面的按钮里面关闭iframe时，ie8会报错，而ff和chrome没有报错。
错误信息是502行的$._iframe.style.cssText…
我的关闭方式是：parent.window.art.dialog({id:’addDept’}).close();