微信扫一扫打赏支持

好用的js插件---1、sweetalert2

好用的js插件---1、sweetalert2

一、总结

一句话总结：

SweetAlert2是一个非常优雅的js的弹出框的插件，比较好用和q萌

 

 

二、sweetalert2

1、官网

SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes
https://sweetalert2.github.io/

 

 

2、基本使用

 

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 7     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
 8     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
 9 </head>
10 <body>
11 <button id="btn1" style="font-size: 2rem;">
12     点我
13 </button>
14 <script>
15     let btn1=document.getElementById('btn1');
16     btn1.onclick=function () {
17         Swal.fire({
18             icon: 'error',
19             title: '温馨提示',
20             text: '您的操作有误，请重试！',
21             showClass: {
22                 popup: 'animated flipInX faster'
23             },
24             hideClass: {
25                 popup: 'animated flipOutX faster'
26             }
27         })
28     }
29 </script>
30 </body>
31 </html>

 

三、课程代码

 

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>sweetalert小实例</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 7     <style>
 8         .div1{
 9             padding: 30px;
10         }
11     </style>
12     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
13     <script src="sweetalert2@9.js"></script>
14 <!--    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>-->
15 </head>
16 <body>
17     <div id="div1" class="div1">
18         <button id="btn1">客官，点我</button>
19     </div>
20     <script>
21         let btn1=document.getElementById('btn1');
22         btn1.onclick=function () {
23             Swal.fire({
24                 icon: 'success',
25                 title: '温馨提示',
26                 text: '恭喜您，中了500w现金大奖!',
27                 showCloseButton: false,
28                 showClass: {
29                     popup: 'animated zoomInUp faster'
30                 },
31                 hideClass: {
32                     popup: 'animated zoomOut faster'
33                 }
34             })
35         }
36     </script>
37 </body>
38 </html>

 

 

 

 
posted @ 2020-01-17 19:14  范仁义  阅读(236)  评论(0)  编辑  收藏  举报