index.html
4.53 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport"/>
<link href="css/jqDialog.css" rel="stylesheet"></head>
<script src="js/jqDialog.js"></script>
<style>
*{margin: 0;padding: 0;}
.mDialogs{display: inline-block;padding: 0 20px; text-decoration: none;outline: none; margin: 20px 10px; background: #222;color:#fff; line-height: 40px; text-align: center}
.dialog_load2.c_alert_wrap{background: none;box-shadow: none}.dialog_load.c_alert_wrap{background: none;}.dialog_load .c_alert_con{background: rgba(0,0,0,.7);padding:24px 25px}.c_alert_con img{vertical-align: top}
</style>
<body>
<a class="mDialogs" id="mdialog1" href="javascript:;">默认</a>
<a class="mDialogs" id="mdialog2" href="javascript:;">2秒后自动关闭</a>
<a class="mDialogs" id="mdialog3" href="javascript:;">带有title</a>
<a class="mDialogs" id="mdialog4" href="javascript:;">带有按钮</a>
<a class="mDialogs" id="mdialog5" href="javascript:;">追加样式</a>
<a class="mDialogs" id="mdialog6" href="javascript:;">其他</a>
<a class="mDialogs" id="mdialog9" href="javascript:;">正在加载</a>
</body>
<script>
/**使用说明*************************************/
// Dialog.init('测试文字') //默认
// Dialog.init('测试文字',2000) //第二个参数时间，2秒后自动关闭
// Dialog.init('测试文字',{
// time : 1000, //自动关闭
// maskClick : false, //点击背景层是否关闭弹层
// mask : false, //是否显示遮罩
// title : '是否删除？', //添加标题
// index : 1, //设置索引，用于close方法
// addClass : 'bgRed', //追加class
// style : 'color:red', //追加css
// button : { //按钮
// 确定 : function(){
// Dialog.init('你点击了确定',1000);
// Dialog.close(this);
// },
// 取消 : function(){
// Dialog.init('你点击了取消',1000)
// Dialog.close(this);
// }
// },
// before : function(){
// //this.classList.add('autoWidth')
// //dom创建成功，但未渲染
// console.log('创建成功',this);
// },
// after : function(){
// console.log('关闭成功',this)
// },
// onload : function(){
// console.log('加载成功',this)
// }
// });
// //关闭
// Dialog.close(this); //在内部使用可直接使用this
// Dialog.close(1,function(){
// //手动关闭弹层，第一个参数为索引值（配合上面index参数使用）；
// //第二个参数为回调
// });
mdialog1.onclick = function(){
Dialog.init('大家都吃着聊着笑着',{maskClick : 1});
}
mdialog2.onclick = function(){
Dialog.init('两秒后自动关闭',2000);
}
mdialog3.onclick = function(){
Dialog.init('带有title',{
title : '是否删除？'
});
}
var showFlag = true;
mdialog4.onclick = function(){
Dialog.init('<input type="text" placeholder="请输入5个字符" style="margin:8px 0;width:100%;padding:11px 8px;font-size:15px; border:1px solid #999;"/><br><a href="javascript:abc()">123</a>',{
title : '<div class="c_alert_title2">身份验证</div>',//title : 'abc',默认样式
button : {
确定 : function(){
if(this.querySelector('input').value.length >= 5){
Dialog.init('你输入的内容是：'+this.querySelector('input').value);
Dialog.close(this);
showFlag = false;
}else{
Dialog.init('你输入的内容不符合要求！',1100);
};
},
点击关闭 : function(){
Dialog.init('你点击了关闭',1000);
Dialog.close(this);
}
}
});
}
function abc(){
alert();
}
mdialog5.onclick = function(){
Dialog.init('追加样式',{
title : '警告',
style : 'padding: 30px 14px;color:red;font-weight: bold;font-size:25px'
});
}
mdialog6.onclick = function(){
Dialog.init('<img src="img/6.jpg" width="100%">',{
title : '图片预览',
button : {
确定 : function(){Dialog.close(this);}
}
});
}
mdialog9.onclick = function(){
Dialog.init('<img src="img/load3.gif" width="48px"/>',{
mask : 0,
addClass : 'dialog_load',
time : 3000,
after : function(){
Dialog.init('加载成功！',1000);
}
});
}
</script>
</html>