码迷,mamicode.com
首页 > 其他好文 > 详细

sweetalert弹窗的使用

时间:2017-05-15 16:25:59      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:nconf   删除   mat   sheet   erro   body   pre   har   内容   

之前接触到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弹窗的使用

标签:nconf   删除   mat   sheet   erro   body   pre   har   内容   

原文地址:http://www.cnblogs.com/xinjianheyi/p/6856746.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!