jQuery实现简单弹窗遮罩效果
更新时间：2017年02月27日 15:35:31 作者：我本善良
本文主要介绍了jquery实现简单弹窗遮罩效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧
效果图：
图（1）初始图
图（2）点击按钮后
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
#mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
background: #666;
opacity: 0.5;
filter: alpha(opacity=50)-moz-opacity: 0.5;
display: none;
}
.popup {
position: absolute;
left: 50%;
width: 600px;
height: 200px;
background: #fff;
z-index: 1000;
border: 1px solid #333;
display: none;
}
.btn_close {
position: absolute;
top: 5px;
right: 5px;
}
</style>
</head>
<body>
<button class="btn_show">遮罩层</button>
<div id="mask"></div>
<div class="popup">
<button class="btn_close">x</button>
</div>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script>
$(function() {
$('.btn_show').click(function() {
$('#mask').css({
display: 'block',
height: $(document).height()
})
var $Popup = $('.popup');
$Popup.css({
left: ($('body').width() - $Popup.width()) / 2+ 'px',
top: ($(window).height() - $Popup.height()) / 2 + $(window).scrollTop() + 'px',
display: 'block'
})
})
$('.btn_close').click(function() {
$('#mask,.popup').css('display', 'none');
})
})
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
这篇文章主要介绍了在myeclipse中如何加入jquery代码提示功能,需要的朋友可以参考下2014-06-06
jquery multiSelect 多选下拉框实现挨骂2010-07-07
这篇文章主要介绍了jQuery实现当拉动滚动条到底部加载数据的方法,结合实例形式分析了jQuery针对滚动事件的监听、响应及数据加载相关操作技巧,需要的朋友可以参考下2019-01-01
jquery.Ajax()方法调用Asp.Net后台的方法解析
本篇文章主要是对jquery.Ajax()方法调用Asp.Net后台的方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
这篇文章主要介绍了解决jQuery使用JSONP时产生的错误，需要的朋友可以参考下2015-12-12
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
下面小编就为大家带来一篇JavaScript 弹出子窗体并返回结果到父窗体的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
以前在写ajax请求时，总是喜欢使用jQuery+ashx的方式进行调用，今天采取jQuery+WebService的方法来做ajax请求，发现这种方式比使用ashx的方式要更方便。2011-03-03
jQuery动态添加 input type=file的实现代码
有时候需要在页面上允许用户上传多个文件，个数由用户自己决定，个数多了也可以删除，使用jQuery可以很简单的实现这个功能2012-06-06
在传送参数时，经常会碰到向后台传送一些相同属性的参数，最好的选择是采用数组的方式，下面有个不错的示例，大家可以参考下2014-02-02
详解jquery validate实现表单验证 （正则表达式）
本篇文章主要介绍了jquery validate实现表单验证 （正则表达式），用户填写表单时，可以快速地对用户填写的数据进行验证，并做出反馈。有兴趣的可以了解一下。2017-01-01
最新评论