原生js手机端弹窗提示框代码.zip资源-CSDN文库

共6个文件

js：2个

css：1个

gif：1个

版权申诉

js代码

CSS3

html5

131 浏览量 2024-11-23 13:46:07 上传评论收藏 29KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

原生js手机端弹窗提示框代码.zip （6个子文件）

dist

6.jpg 19KB

mDialog.js 4KB

mDialogMin.js 3KB

load3.gif 5KB

dialog.css 9KB

index.html 5KB

<!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; font-family:"开心软件少儿简体","方正少儿简体","迷你简少儿","方正少儿_gbk",sans-serif} .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> <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> </body> </html>

评论收藏

内容反馈

版权申诉