SweetAlert2 弹窗
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4.     <head>  
  5.         <meta charset="utf-8">  
  6.         <title>SweetAlert2</title>  
  7.         <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
  8.         <meta name="apple-mobile-web-app-capable" content="yes">  
  9.         <meta name="apple-mobile-web-app-status-bar-style" content="black">  
  10.   
  11.         <!--标准mui.css-->  
  12.         <link rel="stylesheet" href="resource/css/mui.min.css">  
  13.         <link rel="stylesheet" href="resource/css/sweetalert2.min.css" />  
  14.         <script type="text/javascript" src="resource/js/sweetalert2.min.js"></script>  
  15.         <script type="text/javascript" src="https://cdn.jsdelivr.net/es6-promise/latest/es6-promise.min.js"></script>  
  16.         <script type="text/javascript" src="resource/js/jquery-2.1.1.min.js"></script>  
  17.         <style>  
  18.             .mui-content-padded {  
  19.                 margin: 10px;  
  20.             }  
  21.         </style>  
  22.     </head>  
  23.   
  24.     <body>  
  25.         <div class="mui-content">  
  26.             <div class="mui-content-padded">  
  27.                 <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="base">基本信息框</button>  
  28.                 <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="success">成功提示框</button>  
  29.                 <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="error">错误提示框</button>  
  30.                 <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="warning">警告提示框</button>  
  31.                 <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="info">消息提示框</button>  
  32.                 <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="question">疑问提示框</button>  
  33.                 <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="autoclose">自动关闭对话框</button>  
  34.                 <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="design">自定义标签和按钮样式</button>  
  35.                 <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="function">按钮带回调事件</button>  
  36.                 <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="image">自定义图片</button>  
  37.                 <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="background">自定义背景弹出框</button>  
  38.                 <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="ajax">AJAX异步回调对话框</button>  
  39.                 <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="input">文本输入对话框</button>  
  40.                 <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="textarea">多行输入对话框</button>  
  41.                 <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="select">下拉选择对话框</button>  
  42.             </div>  
  43.         </div>  
  44.     </body>  
  45.     <script src="resource/js/mui.min.js"></script>  
  46.     <script>  
  47.         mui.init({  
  48.             swipeBack: true //启用右滑关闭功能  
  49.         });  
  50.     </script>  
  51.   
  52. </html>  
  53. <script type="text/javascript">  
  54.     $("#base").on("click", function() {  
  55.         swal({  
  56.             title: '温馨提示',  
  57.             text: "您好这是一个基本的信息提示框",  
  58.             confirmButtonText: '确认',  
  59.             confirmButtonColor: 'Green',  
  60.         })  
  61.     })  
  62.   
  63.     $("#success").on("click", function() {  
  64.         swal({  
  65.             text: "信息已提交成功！",  
  66.             type: "success",  
  67.             confirmButtonText: '确认',  
  68.             confirmButtonColor: '#4cd964',  
  69.         })  
  70.     })  
  71.   
  72.     $("#error").on("click", function() {  
  73.         swal({  
  74.             text: "对不起信息删除失败",  
  75.             type: "error",  
  76.             confirmButtonText: '确认',  
  77.             confirmButtonColor: '#f27474',  
  78.         })  
  79.     })  
  80.   
  81.     $("#warning").on("click", function() {  
  82.         swal({  
  83.             text: "您好，信息正在提交中",  
  84.             type: "warning",  
  85.             confirmButtonText: '确认',  
  86.             confirmButtonColor: '#f8bb86',  
  87.         })  
  88.     })  
  89.   
  90.     $("#info").on("click", function() {  
  91.         swal({  
  92.             text: "您好，信息正在提交中",  
  93.             type: "info",  
  94.             confirmButtonText: '确认',  
  95.             confirmButtonColor: '#3fc3ee',  
  96.         })  
  97.     })  
  98.   
  99.     $("#question").on("click", function() {  
  100.         swal({  
  101.             text: "您还没有关注我们？",  
  102.             type: "question",  
  103.             confirmButtonText: '确认',  
  104.             confirmButtonColor: '#c9dae1',  
  105.         })  
  106.     })  
  107.   
  108.     $("#autoclose").on("click", function() {  
  109.         swal({  
  110.             title: "自动关闭",  
  111.             text: "将在三秒钟自动关闭该对话框？",  
  112.             showConfirmButton: false,  
  113.             timer: 3000  
  114.         })  
  115.     })  
  116.   
  117.     $("#design").on("click", function() {  
  118.         swal({  
  119.             title: '<h2 style="font-weight:bold;color:red">温馨提示</h2>',  
  120.             type: 'info',  
  121.             html: '<a href="http://www.baidu.com" style="color:green">自定义的html内容</a>',  
  122.             showCloseButton: true,  
  123.             showCancelButton: true,  
  124.             confirmButtonColor: 'gray',  
  125.             cancelButtonColor: '#3fc3ee',  
  126.             confirmButtonText: ' <i class="mui-icon mui-icon-refresh"></i>取消',  
  127.             cancelButtonText: ' <i  class="mui-icon mui-icon-trash"></i>确认'  
  128.         })  
  129.     })  
  130.   
  131.     $("#function").on("click", function() {  
  132.         swal({  
  133.             text: "您还没有关注我们，建议先关注?",  
  134.             type: 'warning',  
  135.             showCancelButton: true,  
  136.             confirmButtonColor: '#f8bb86',  
  137.             cancelButtonColor: 'gray',  
  138.             cancelButtonText: '取消',  
  139.             reverseButtons: true, //控制按钮反转  
  140.             confirmButtonText: '立即关注',  
  141.         }).then(function(isConfirm) {  
  142.             if(!isConfirm) {  
  143.                 swal({  
  144.                     text: "取消了！",  
  145.                     type: "error",  
  146.                     confirmButtonText: '确认',  
  147.                     confirmButtonColor: '#f27474',  
  148.                 })  
  149.             } else {  
  150.                 swal({  
  151.                     text: "已成功关注！",  
  152.                     type: "success",  
  153.                     confirmButtonText: '确认',  
  154.                     confirmButtonColor: '#4cd964',  
  155.                 })  
  156.             }  
  157.         })  
  158.     })  
  159.   
  160.     $("#image").on("click", function() {  
  161.         swal({  
  162.             title: '图片',  
  163.             text: '这是一个自定义的图片',  
  164.             imageUrl: 'http://wx.qlogo.cn/mmopen/Fsf6yHxNrcNbzCmUnjlkice1HviaicNN3y0MbH19JIGc4I3RfgJBiaUTHNefF1xs0QpKl6aRJ7A2PW1N4KiaDBeeINQ/0',  
  165.             imageWidth: 280,  
  166.             imageHeight: 280,  
  167.             animation: true, //控制是否有动画  
  168.             confirmButtonText: '夏守成真他妈帅',  
  169.             confirmButtonColor: '#4cd964',  
  170.         })  
  171.     })  
  172.   
  173.     $("#background").on("click", function() {  
  174.         swal({  
  175.             title: '<h3 style="color:white">这是一个自定义的背景弹出框</h3>',  
  176.             width: 600,  
  177.             padding: 100,  
  178.             background: '#fff url(http://img2.3lian.com/2014/f5/172/d/31.jpg)',  
  179.             showConfirmButton: false,  
  180.         })  
  181.     })  
  182.   
  183.     $("#ajax").on("click", function() {  
  184.         swal({  
  185.             title: '输入您的姓名',  
  186.             input: 'text',  
  187.             confirmButtonText: '提交',  
  188.             confirmButtonColor: '#4cd964',  
  189.             showLoaderOnConfirm: true, //加载按钮是否可见  
  190.             preConfirm: function() {  
  191.                 return new Promise(function(resolve) {  
  192.                     setTimeout(function() {  
  193.                         resolve();  
  194.                     }, 5000);  
  195.                 });  
  196.             },  
  197.             allowOutsideClick: false //弹框外是否可点  
  198.         }).then(function(res) {  
  199.             if(res) {  
  200.                 //实际使用过程中将此处换成ajax代码即可  
  201.                 swal({  
  202.                     type: 'success',  
  203.                     title: 'Ajax 请求完成',  
  204.                     html: '您的邮箱是: ' + '<strong>' + res + '</strong>',  
  205.                     confirmButtonText: '确定',  
  206.                     confirmButtonColor: '#4cd964'  
  207.                 });  
  208.             }  
  209.         });  
  210.     });  
  211.   
  212.     $("#input").on("click", function() {  
  213.         swal({  
  214.             title: '请输入您的姓名',  
  215.             input: 'text',  
  216.             confirmButtonText: '确定',  
  217.             confirmButtonColor: '#4cd964',  
  218.             inputValidator: function(value) {  
  219.                 return new Promise(function(resolve, reject) {  
  220.                     if(value) {  
  221.                         resolve();  
  222.                     } else {  
  223.                         reject('至少要输入一个值哦！');  
  224.                     }  
  225.                 });  
  226.             }  
  227.         }).then(function(result) {  
  228.             if(result) {  
  229.                 swal({  
  230.                     title: '结果通知',  
  231.                     text: '您的名字是: <strong>' + result + '</strong>',  
  232.                     confirmButtonText: '确定',  
  233.                     confirmButtonColor: '#4cd964'  
  234.                 });  
  235.             }  
  236.         });  
  237.     })  
  238.   
  239.     $("#textarea").on("click", function() {  
  240.         swal({  
  241.             input: 'textarea',  
  242.             confirmButtonText: '确定',  
  243.             confirmButtonColor: '#4cd964'  
  244.         }).then(function(result) {  
  245.             if(result) {  
  246.                 swal({  
  247.                     title: '结果通知',  
  248.                     text: '您输入的是: <strong>' + result + '</strong>',  
  249.                     confirmButtonText: '确定',  
  250.                     confirmButtonColor: '#4cd964'  
  251.                 });  
  252.             }  
  253.         });  
  254.     })  
  255.   
  256.     $("#select").on("click", function() {  
  257.         swal({  
  258.             title: '请选择您的姓名',  
  259.             input: 'select',  
  260.             inputOptions: {  
  261.                 'xsc': '夏守成',  
  262.                 'ylj': '杨林静',  
  263.                 'William': 'William'  
  264.             },  
  265.             inputPlaceholder: '选择你的名字',  
  266.             showCancelButton: true,  
  267.             confirmButtonText: '确定',  
  268.             confirmButtonColor: '#4cd964',  
  269.             preConfirm: function() {  
  270.                 return new Promise(function(resolve) {  
  271.                     resolve(["杨林静"]);  
  272.                 });  
  273.             }  
  274.         }).then(function(result) {  
  275.             if(result) {  
  276.                 swal({  
  277.                     type: 'success',  
  278.                     html: '你选择的是: <strong>' + result[0] + '</strong>',  
  279.                     confirmButtonText: '确定',  
  280.                     confirmButtonColor: '#4cd964'  
  281.                 });  
  282.             }  
  283.         });  
  284.     })  
  285.   
  286. </script>  

如上图所示，利用Sweet Alert可以制作很多非常好的弹窗提醒效果，如下所示：

源代码下载地址：http://download.csdn.net/detail/u013059555/9722384

posted on 2018-01-16 02:02  微笑点燃希望  阅读(675)  评论(0)  编辑  收藏  举报
Powered by:
博客园
Copyright © 2024 微笑点燃希望
Powered by .NET 9.0 on Kubernetes
font=white