<!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="dist/dialog.css" rel="stylesheet"></head>
<script src="dist/mDialogMin.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 : '是否删除？'
});
}
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;"/>',{
title : '输入点什么吧！',
button : {
确定 : function(){
if(this.querySelector('input').value.length >= 5){
Dialog.init('你输入的内容是：'+this.querySelector('input').value);
Dialog.close(this);
}else{
Dialog.init('你输入的内容不符合要求！',1100);
};
},
点击关闭 : function(){
Dialog.init('你点击了关闭',1000);
Dialog.close(this);
}
}
});
}
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="dist/6.jpg" width="100%">',{
title : '图片预览',
button : {
确定 : function(){Dialog.close(this);}
}
});
}
mdialog9.onclick = function(){
Dialog.init('<img src="dist/load3.gif" width="48px"/>',{
mask : 0,
addClass : 'dialog_load',
time : 3000,
after : function(){
Dialog.init('加载成功！',1000);
}
});
}
</script>
</html>
jquery手机微信公众号弹出框
4星 · 超过85%的资源 需积分: 16 41 浏览量
2018-07-25
16:46:49
上传
评论
收藏 30KB ZIP 举报 
dialog.zip （6个子文件） 
dialog 
index.html 5KB dist 
6.jpg 19KB
mDialog.js 4KB dialog.css 9KB mDialogMin.js 3KB
load3.gif 5KB资源评论
LianYaFei2019-08-05用到了 谢谢
