首页 > 代码库 > sweetalert弹窗的使用
sweetalert弹窗的使用
之前接触到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="http://www.mamicode.com/node_modules/sweetalert/dist/sweetalert.css"> <!-- <link rel="stylesheet" href="http://www.mamicode.com/sweetalert.css"> --> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="http://www.mamicode.com/node_modules/sweetalert/dist/sweetalert.min.js"></script> <!-- <script src="http://www.mamicode.com/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=http://www.mamicode.com/=false) return false;"#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弹窗的使用
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。