jQuery简单的弹出层效果

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/a772116804/article/details/79977003
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery简单的弹出层效果-jq22.com</title>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<style>
* {
	margin:0;
	padding:0;
}
.fulled {
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	background:rgba(240,140,160,0.8);
	display:none;
}
.container {
	width:100%;
	height:600px;
}
.container a {
	text-decoration:none;
	color:#0099FF;
	line-height:100px;
	font-size:60px;
	text-align:center;
	display:block;
}
.fulled .fix-box {
	position:relative;
	margin:10% auto;
	width:500px;
	height:400px;
	background:url(http://www.jq22.com/img/cs/500x300a.png) no-repeat;
	border:4px solid #E63003;
}
.fulled .fix-box .close {
	position:absolute;
	right:10px;
	top:0;
	color:deeppink;
	cursor:pointer;
}
</style>
</head>
<body>
<div class="container"> <a href="javascript:;">弹出层效果</a> </div>
<div class="fulled">
  <div class="fix-box">
    <p class="close">close</p>
  </div>
</div>

<script>
$(document).ready(function() {
    $(".container").on("click", function(event) {
        event.preventDefault();
        $(".fulled").fadeIn();
    })
    $(".close").on("click", function(event) {
        if ($(event.target).is(".close") || $(event.target).is(".fix-box")) {
            //alert(123)
            event.preventDefault();
            $(".fulled").hide();
        }
    })
    $(document).keyup(function(event) {
        if (event.which == "27") {
            $(".fulled").fadeOut();
        }

    })
})
</script>

</body>
</html>

阅读更多
想对作者说点什么? 我来说一句

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