jQuery动画弹出确认框和警告框js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery动画弹出确认框和警告框js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery动画弹出确认框和警告框</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/zzsc.css">
<link rel="stylesheet" type="text/css" href="css/jquery.alertable.css">
</head>
<body>
<div class="container" style="padding: 2em 0;min-height: 300px;">
	<div class="row">
		<div class="col-md-12">
			<button class="alert-demo btn btn-danger" type="button">Alert Dialog</button>
			<button class="confirm-demo btn btn-primary" type="button">Confirm Dialog</button>
			<button class="prompt-demo btn btn-primary" type="button">Prompt Dialog</button>
			<hr>
			<button class="alert-vel btn btn-info" type="button">With Velocity.js</button>
		</div>
	</div>
</div>

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src='js/velocity.min.js'></script>
<script src='js/velocity.ui.min.js'></script>
<script src="js/jquery.alertable.js"></script>
<script type="text/javascript">
	$(function() {

	  // Standard alert
	  $('.alert-demo').on('click', function() {
		$.alertable.alert('Howdy!');
	  });
	  
	  // Standard confirm
	  $('.confirm-demo').on('click', function() {
		$.alertable.confirm('Are You Sure?').then(function() {
		  $.alertable.alert('You Clicked OK');
		}, function() {
		  console.log('Cancel');      
		});
	  });
	  
	  $('.prompt-demo').on('click', function() {
						$.alertable.prompt('How many?').then(function(data) {
							console.log('Prompt submitted', data);
						}, function() {
							console.log('Prompt canceled');
						});
					});

	  // Standard alert with custom show/hide functions (uses velocity.js)
	  $('.alert-vel').on('click', function() {
		$.alertable.alert('Howdy!', {
		  show: function() {
			$(this.overlay).velocity('transition.fadeIn');        
			$(this.modal).velocity('transition.flipBounceYIn');
		  },
		  hide: function() {
			$(this.overlay).velocity('transition.fadeOut');
			$(this.modal).velocity('transition.perspectiveUpOut');
		  } 
		});
	  });  

	});
</script>
</body>
</html>

CSS代码(zzsc.css):

body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{background:#494A5F;font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif;}
a{color:rgba(255,255,255,0.6);outline:none;text-decoration:none;-webkit-transition:0.2s;transition:0.2s;}
a:hover,a:focus{color:#74777b;text-decoration:none;}

附件:下载该文件资源,减少时间成本(增值服务)