我们在设计页面与用户的交互时,除了页面的整体切换(跳到另一个页面)之外,还有基于弹窗的交互方式。
这是很正常的需求,因此稍为完善的框架都会提供这样的功能:例如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还可以参考以下的做法