关闭

jquery实现弹窗效果实例

标签: jqueryweb前端实例
230人阅读 评论(0) 收藏 举报
分类:

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



1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:146804次
    • 积分:2540
    • 等级:
    • 排名:第16238名
    • 原创:103篇
    • 转载:6篇
    • 译文:0篇
    • 评论:18条
    最新评论