摘要:本篇jQuery教程探讨了jQuery如何实现弹出框及遮罩层效果,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="submit" value="点我">
<!-- 提交按钮弹出DOM部分 -->
<div class="mask"></div>
<div class="box">
<!-- 关闭按钮 -->
<a class="open">X</a>
<!-- 内容 -->
哈哈哈哈哈哈哈
</div>
</body>
</html>
javascript:
<script src="jquery.js"></script><script>
$(document).ready(function(){
$("input").click(function(e){
// 阻止默认提交表单事件
e.preventDefault();
// 将弹框位置居中
center($(".box"));
// 遮罩层显示,此处window也可以换成document,区别在于遮罩层高度的差别
$('.mask').show().height($(window).height());
// 弹框显示
$('.box').show();
//弹框弹出后隐藏掉滑动条,阻止了滚轮对页面的控制
$("body").css({overflow:"hidden"});
});
}).keydown(function(e){ //document监听按下esc将关闭弹出框及遮罩层
if(e.keyCode==27){
$('.mask').hide();
$('.box').hide();
// 重新显示滑动条
$("body").css({overflow:"auto"});
}
})// 关闭按钮
$('.open').click(function(e) {
func_close();
})// 关闭函数function func_close(){
$('.mask').hide();
$('.box').hide();
// 重新显示滑动条
$("body").css({overflow:"auto"});
}// 居中函数function center(obj){
var screenWidth = $(window).width(), screenHeight = $(window).height(); //当前浏览器窗口的 宽高
var scrolltop = $(window).scrollTop();//获取当前窗口距离页面顶部高度
var objLeft = (screenWidth - obj.width())/2;
var objTop = (screenHeight - obj.height())/2 + scrolltop;
obj.css({"left": objLeft + 'px', "top": objTop + 'px','display': 'block'});
}</script>
CSS:
/*遮罩层样式*/.mask{
display:none;
position:absolute;
z-index:10;
left:0;
top:0;
width:100%;
height:100%;
background:#666;
opacity:0.5;
-moz-opacity:0.5;
filter:alpha(opacity=50)
}/*弹出框样式*/.box{
z-index:999;
display:none;
position: relative;
width:340px;
height:180px;
border:solid 1px #999;
border-radius:5px;
background-color:#fff;
box-shadow:0 0 0 1px #00aff0;
text-align:center;
padding-top: 20px;
}/* 关闭按钮 */.open {
position: absolute;
top: 0;
right: 10px;
}/*按钮样式*/input{
display:block;
width:100px;
height:30px;
outline:none;
cursor:pointer;
font-size:16px;
}
本文由职坐标整理发布,欢迎关注职坐标WEB前端jQuery频道,获取更多jQuery知识!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号