介绍一个国产的JS弹窗组件

  我们在设计页面与用户的交互时，除了页面的整体切换（跳到另一个页面）之外，还有基于弹窗的交互方式。

这是很正常的需求，因此稍为完善的框架都会提供这样的功能：例如Ext的MessageBox

  那在js我们怎么做这样一个弹窗呢？不要告诉我你打算用alert（）啊。 

 

使用场景与需求

 

• 弹出消息：alert
• 确认操作：confirm
• 更丰富的交互：弹出进度条。。。。等
• 更复杂的选择框：比如选择在已上传图片的列表中选择一个图片

ArtDialog

  artDialog（http://www.planeart.cn/demo/artDialog/）是国产的一个开源组件，在弹窗这个领域已经算相当丰富了。

 

 

自适应内容

artDialog的特殊UI框架能够适应内容变化，甚至连外部程序动态插入的内容它仍然能自适应，因此你不必去考虑消息内容尺寸使用它。它的消息容器甚至能够根据宽度让文本居中或居左对齐——这一切全是XHTML+CSS原生实现。

完善的接口

它的接口完善，可以轻易与外部程序配合使用。如异步写入消息、控制位置、尺寸、显示与隐藏、关闭等。

细致的体验

如果不是在输入状态，它支持Esc快捷键关闭；可指定在元素附近弹出，让操作更便捷；智能给按钮添加焦点；黄金比例垂直居中；超大响应区域特别为ipad等触屏设备优化；预先缓存皮肤图片更快响应……

跨平台兼容

兼容：IE6+、Firefox、Chrome、Safari、Opera以及iPad等移动设备。并且IE6下也能支持现代浏览器的静止定位(fixed)、覆盖下拉控件、alpha通道png背景。

  我不知道为什么ArtDialog在5.0开始取消了iframe部分功能，如果你想用类似的功能，可以看看lhgDialog(http://code.google.com/p/lhgdialog/)，无责任推荐哈，因为貌似有些争论说lhgDialog是抄袭了artDialog，在IT界，谁抄袭谁是永恒的话题

  当然，如果你用5.0+的ArtDialog，也可以通过以下的方法去弹出iframe

 

art.dialog({title : "选择***",
            cancel : true,
            width : 600,
            padding : '5px',
            content : '<iframe src="@{Images.selectImgDialog()}" id="selectImgDialog" name="selectImgDialog" height="400" width="600" frameborder="0"></iframe>',
            ok : function(){
                ...
            }
        });

 

 

 

 

 

除了artDialog还可以参考以下的做法

http://www.oschina.net/question/12_44011