sweetalert弹窗的使用

Posted 2020-09-18 惟其艰难，方显勇毅

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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="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弹窗的使用的主要内容，如果未能解决你的问题，请参考以下文章