SweetAlert2与jQuery按钮示例-优快云博客

本文链接：https://blog.youkuaiyun.com/u010081710/article/details/52191597

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>MyButton Test</title>
  <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script><!--使用Jquery $选择器 -->
  <script src="https://cdn.jsdelivr.net/es6-promise/latest/es6-promise.min.js"></script> <!-- IE support -->
  <script src="D:/sweetalert2-master/dist/sweetalert2.min.js"></script>
  <link rel="stylesheet" href="D:/sweetalert2-master/dist/sweetalert2.min.css">
</head>

<style>
.mybutton{
    
	background-color: #3085d6;
    color: #fff;
    border: 0;
    box-shadow: none;
    font-size: 15px;
    font-weight: 500;
    border-radius: 5px;
    padding: 11px 19px;
    cursor: pointer;
    white-space: nowrap;
}

</style>

<body>
	<h4>Button CSS Test</h4>
    <button class="mybutton">click me !!!!</button>	
	
	<script>  
	$('button').on('click', function() {
		swal({
		  title: 'Are you sure?',
		  text: 'You will not be able to recover this imaginary file!',
		  type: 'warning',
		  showCancelButton: true,
		  confirmButtonText: 'Yes, delete it!',
		  cancelButtonText: 'No, keep it',
		}).then(function(isConfirm) {
		  if (isConfirm === true) {
			swal(
			  'Deleted!',
			  'Your imaginary file has been deleted.',
			  'success'
			);
		 
		  } else if (isConfirm === false) {
			swal(
			  'Cancelled',
			  'Your imaginary file is safe :)',
			  'error'
			);
		 
		  } else {
			// Esc, close button or outside click
			// isConfirm is undefined
		  }
		},function(dismiss){
			//swal({title:"Cancelled!",text: "已取消。", type:"info", timer: 1000,showConfirmButton: true});
			swal(
			  'Cancelled',
			  'Your imaginary file is safe :)',
			  'error'
			);
		});
	})
	</script>
</body>
</html>