包子源的博客

仰望星空,脚踏实地

jquery实现弹窗效果实例

利用jquery实现两种弹窗效果:

1:淡入弹窗效果:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{padding: 0;margin: 0;}
			.box{width: 100%;height: 100%;}
			.main{width: 100%;height: 100%;background-color: rgba(0,0,0,0.8);display: none;position: fixed;z-index: 1;}
			.mainbox{width: 800px;height: 100%;margin: 0 auto;background-color: rgba(255,255,255,0.8);padding: 20px;}
			.kkk{width: 100%;height: 1200px;background-color: red;}
			.close{color: red;cursor: pointer;}
		</style>
		<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
		<script>
			$(function(){
				$(".btn").click(function(){
					$(".main").fadeIn();
				});
				$(".close").click(function(){
					$(".main").fadeOut();
				});
			});
		</script>
	</head>
	<body>
		<div class="main">
				<div class="mainbox">
					<div class="close">点击关闭</div>
				</div>
			</div>
		<div class="box">
			<div class="kkk">
				<input class="btn" type="button" value="点击淡入弹窗" />
			
			</div>
			
			
		</div>
	</body>
</html>


滑动弹窗效果:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{padding: 0;margin: 0;}
			.box{width: 100%;height: 100%;}
			.main{width: 100%;height: 100%;background-color: rgba(0,0,0,0.8);display: none;position: fixed;z-index: 1;}
			.mainbox{width: 800px;height: 100%;margin: 0 auto;background-color: rgba(255,255,255,0.8);padding: 20px;display: none;}
			.kkk{width: 100%;height: 1200px;background-color: red;}
			.close{color: red;cursor: pointer;}
		</style>
		<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
		<script>
			$(function(){
				$(".btn").click(function(){
					$(".main").fadeIn();
					$(".mainbox").delay(500).slideDown();
				});
				$(".close").click(function(){
					$(".main").fadeOut();
				});
			});
		</script>
	</head>
	<body>
		<div class="main">
				<div class="mainbox">
					<div class="close">点击关闭</div>
				</div>
			</div>
		<div class="box">
			<div class="kkk">
				<input class="btn" type="button" value="点击淡入弹窗" />
			
			</div>
			
			
		</div>
	</body>
</html>



阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ziwoods/article/details/49906637
文章标签: jquery web前端 实例
个人分类: jQuery
相关热词: jquery实现
上一篇Bootstrap 模态框(Modal)插件
下一篇jquery的text()、html() 以及 val()
想对作者说点什么? 我来说一句

jQuery实现换肤效果

2011年02月26日 45KB 下载

通讯录的弹窗效果.

2012年04月27日 93KB 下载

没有更多推荐了,返回首页

关闭
关闭