jQuery简单的弹出层效果

7人阅读 评论(0) 收藏 举报
分类:
<!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>

查看评论

猫商城首页楼层效果

-
  • 1970年01月01日 08:00

html+js/jquery实现弹出层效果

在做网页的时候,弹出层是个很好用的东西,它既可以显示出我们想要的内容,又无需重新加载,而且弹出层的样式还可以按我们想要的效果改动,今天就来说一说怎么做一个弹出层。...
  • qq_36568809
  • qq_36568809
  • 2017-05-28 10:39:49
  • 315

自己写了一个jQuery的弹出层,非常非常简单

非常简单的 jquery 弹出层
  • djk8888
  • djk8888
  • 2016-09-09 10:42:13
  • 7608

Jquery弹出层效果

  • 2009年04月05日 18:36
  • 201KB
  • 下载

基于jQuery弹出层的9种效果

触发元素1 示例1:默认弹出层,只须传入触发元素、弹出层、关闭按钮的jquery对象或#ID,其中关闭按钮为可选项。 new PopupLayer({trigger:"#ele1",popupBlk...
  • u013214705
  • u013214705
  • 2015-08-10 09:47:57
  • 723

JQUERY弹出层 三种弹出效果

原文链接 http://www.jq22.com/jquery-info109   查看演示   立即下载 插件描述:jQuery弹出层 三种弹出效果 以侧试各个浏览器兼...
  • qq_34482827
  • qq_34482827
  • 2016-07-11 10:55:17
  • 749

jQuery弹出层有9种效果

  • 2011年11月11日 15:47
  • 31KB
  • 下载

Jquery弹出层插件

  • 2012年10月24日 08:55
  • 1.31MB
  • 下载

jquery弹出层效果

  • 2017年11月13日 13:57
  • 9KB
  • 下载

非常简单好看的JQuery弹出层

body {  font-family:Arial, Helvetica, sans-serif;  font-size:12px;  margin:0;  }  #main {  hei...
  • qq_32340877
  • qq_32340877
  • 2017-03-15 15:55:33
  • 244
    个人资料
    持之以恒
    等级:
    访问量: 1万+
    积分: 1565
    排名: 3万+
    文章存档
    最新评论