artDialog对话框弹窗插件的使用方法

artDialog是一款基于jquery的兼容ie6的对话框插件,久久经验网也使用了这款对话框插件,效果和功能都非常棒

artDialog

artDialog是一个轻巧且高度兼容的javascript对话框组件
 
特色:
1、可定制自适应皮肤
2、在 IE6 下可实现与现代浏览器一样完美无闪动静止定位效果
3、解决了IE6 的下拉控件无法被层覆盖的问题
 
功能: 
1、支持锁定屏幕(遮罩)
2、模拟alert和confirm
3、多窗口弹出
4、静止定位
5、支持Ese键关闭对话框
6、定时关闭
7、自定义位置
8、菜单模式
9、拖动
10、鼠标调节窗口大小
更多功能,等你来发现
 
语法:
art.dialog({ 配置参数 }) 
 
配置参数:
内容
content {消息内容,支持HTML}
title {标题.默认:'提示'}
iframe {嵌入外部页面. 存在content参数时候,此参数无效}
yesText {确定按钮文本. 默认:'确定'}
noText {取消按钮文本. 默认:'取消'}
尺寸
width {宽度,支持em等单位. 默认:'auto'}
height  {高度,支持em等单位. 默认:'auto'}
定位
left {x坐标,可以使用关键字,如:'left'、'right'. 默认:居中}
top {y坐标,可以使用关键字,如:'top'、'bottom'. 默认:居中(注: 小对话框采用黄金比例垂直居中)}
menuBtn {让对话框在指定元素附近弹出, 存在menuBtn参数则让left、top参数失效}
fixed {是否启用静止定位. 默认:false}
界面
style {对话框风格扩展参数,写入自定义className,详情见皮肤css文件的定义,多个用空格隔开}
lock {是否锁定屏幕, 中断用户操作页面. 默认:false}
高级
id {给对话框定义唯一标识id名称. 可以防止重复弹出对话框}
time {多少秒自动关闭}
 
例子展示:
  1. //弹窗2秒倒计时的对话框 
  2. art.dialog({ 
  3.     title: '操作提示',//弹窗标题 
  4.     padding: 50+'px'//内边距,默认20px 
  5.     fixed: true//固定,默认true,false则可拖动 
  6.     lock: false//不锁屏,默认false,true则锁屏 
  7.     content: '名称不能为空',//弹窗内容,可以是html(包括文本、图片、视频动画等) 
  8.     time:2000//2秒后自动关闭对话框 
  9. }); 
  10. //弹窗带“确定”和“取消”按钮的对话框 
  11. art.dialog({ 
  12.     title: '操作提示',//弹窗标题 
  13.     padding: 50+'px'//内边距,默认20px 
  14.     fixed: true//固定,默认true,false则可拖动 
  15.     lock: false//不锁屏,默认false,true则锁屏 
  16.     content: '名称不能为空',//弹窗内容,可以是html(包括文本、图片、视频动画等) 
  17.     time:2000//2秒后自动关闭对话框 
  18.     okValue: '确定'
  19.     ok: function(){//点击“确定”按钮后调用的方法 
  20.         //some code here 
  21.     }, 
  22.     cancelValue: '取消'
  23.     cancel:  function(){//点击“取消”按钮后调用的方法 
  24.         //some code here 
  25.     } 
  26. }); 
外部关闭对话框:
  1. art.dialog({id:'test'}).close(); 
如何取到iframe创建的内容页元素?可以使用artDialog扩展'data'接口:
  1. art.dialog({id:'testDialog'}).data.iframe.document.getElementById('test')//注意,不能跨域哦 
如何确保重复点击只弹出一个对话框,而不会出现多个?给对话框定义一个唯一ID,作为id参数的值
 
注意事项:
页面要有DOCTYPE W3C标准文档声明,符合W3C标准!
以后新版本可能采用window.top.art.dialog代替art.dialog的调用方式,请知晓!
 
artdialog插件下载(提示:artdialog项目在github上托管,如果无法下载,请从我的百度云盘里下载iCheck插件包
 
 

相关经验

导读书签
书签初始化中…