zoukankan      html  css  js  c++  java

  • 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.              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
  • 相关阅读:
    0019. Remove Nth Node From End of List (M)
    0018. 4Sum (M)
    0278. First Bad Version (E)
    0273. Integer to English Words (H)
    0017. Letter Combinations of a Phone Number (M)
    0016. 3Sum Closest (M)
    0015. 3Sum (M)
    软件测试常见面试题
    如何快速掌握DDT数据驱动测试？
    selenium--三种等待方式
  • 原文地址：https://www.cnblogs.com/lykbk/p/mjvgvghkgkvllvuv766t6766776.html
Copyright © 2011-2022 走看看