jQuery css3弹窗动画代码



229 913 305



特效描述:jQuerycss3 弹窗动画代码,jQuery css3弹窗动画代码

代码结构

1. 引入CSS

<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">

2. 引入JS

<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>

3. HTML代码

<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 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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 图片头像上传 文字提示框 文件上传 提示框/弹出层 文本框 layer 下拉框 lightbox 复选 单选 Tooltip工具提示框 登录框 浮动提示框 注册框 html5弹窗动画 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 弹出层拖动 窗口提示框 切换按钮 form表单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到