sweetalert彈窗的使用
阿新 • • 發佈:2017-05-15
jquer 它的 nbsp false swa == 恢復 button click
之前接觸到layer彈出層,今天又發現了一個非常實用的彈出層插件,它的名字叫做sweetalert.
官網地址:http://t4t5.github.io/sweetalert/
npm下載方式:npm install sweetalert
跟著教程寫了幾個demo,感覺效果還是不錯的!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="node_modules/sweetalert/dist/sweetalert.css"> <!-- <link rel="stylesheet" href="sweetalert.css"> --> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="node_modules/sweetalert/dist/sweetalert.min.js"></script> <!-- <script src="sweetalert.min.js"></script> --> <style> </style> </head> <body> <button id="btn01">點我彈出</button> <button id="btn02">點我彈出</button> <button id="btn03">點我彈出</button> <button id="btn04">點我彈出</button> <button id="btn05">點我彈出</button> <button id="btn06">點我彈出</button> <button id="btn07">點我彈出</button> <button id="btn08">點我彈出</button> <script> $("#btn01").click(function(){ swal("這是一條消息!"); }); $("#btn02").click(function(){ swal({ title:‘你確定刪除嗎?‘, text:‘一旦刪除,將無法恢復!‘, type:‘warning‘, showCancelButton:true, confirmButtonColor:‘#DD6B55‘, confirmButtonText:‘確定刪除!‘, closeOnConfirm:false }, function(){ swal("刪除","您的文件已經刪除","success"); } ); }); $("#btn03").click(function(){ swal({ title:‘你確定刪除嗎?‘, text:‘一旦刪除,將無法恢復!‘, type:‘warning‘, showCancelButton:true, confirmButtonColor:‘#DD6B55‘, confirmButtonText:‘確定刪除!‘, cancelButtonText:‘取消操作!‘, closeOnConfirm:false, closeOnCancel:false }, function(isConfirm){ if(isConfirm){ swal("刪除!","您的文件已經被刪除!",‘success‘); }else{ swal(‘取消!‘,"您的文件是依然存在!",‘error‘); } } ) }); $("#btn04").click(function(){ swal({ title:‘Sweet!‘, text:‘送你一張圖片‘, imageUrl:‘node_modules/sweetalert/example/images/thumbs-up.jpg‘ }); }); $("#btn05").click(function(){ swal({ title:"<h1 style=‘font-size:16px‘>此處可以插入html</h1>", text:‘我是<span style="color:#F8BB86">文字內容</span>‘, html:true }) }); $("#btn06").click(function(){ swal({ title:‘自動關閉彈窗‘, text:‘設置彈窗在2秒後關閉‘, timer:2000, showConfirmButton:false }); }); $("#btn07").click(function(){ swal({ title:‘獲取輸入框中的內容‘, text:‘寫入一些有趣的東西吧:‘, type:‘input‘, showCancelButton:true, closeOnConfirm:false, confirmButtonText:‘確定‘, cancelButtonText:‘取消‘, animation:‘slide-from-top‘, inputPlaceholder:‘請輸入一些內容‘ }, function(inputValue){ if(inputValue==false) return false; if(inputValue==‘‘){ swal.showInputError(‘你必須寫入一些東西‘); return false; } swal(‘非常好‘,‘您輸入的內容是:‘+inputValue,‘success‘); } ); }); $("#btn08").click(function(){ swal({ title:‘ajax請求例子‘, text:‘提交ajax請求‘, type:‘info‘, showCancelButton:true, closeOnConfirm:false, showLoaderOnConfirm:true }, function(){ setTimeout(function(){ swal("ajax請求完成"); },2000); } ); }); </script> </body> </html>
sweetalert彈窗的使用