正文

使用Jq实现弹出层

IP云
IP云V管理员/0 阅读
08/30
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

对于前端程序员来说，弹出层是经常用到的，下面我叫大家如何用实现JQuery实现弹出层的效果，代码如下：

CSS：弹出层的效果

.mask {
position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
z-index: 1002; left: 0px;
opacity:0.5; -moz-opacity:0.5;
} .popup-kk{
left: 50%;
width: 1024px;
height: 694px;
background: #fff;
display: none;
border-radius:5px;
z-index: 2000;}
.close {
position: fixed;
top: 21px;
right: 20px;
cursor:pointer;
}

HTML：最主要的是遮挡层和弹出层，遮挡层就是把整个屏幕挡住，弹出层在遮挡层的上面；

注：弹出层的Z-index一定要比遮挡层的大，否则遮挡层就会把弹出层挡住

<p onclick="showMask()">点击</p>
<!--遮挡层-->
<div id="mask" class="mask"></div>
<!--弹出层--><div class="popup-kk">
<span class="close">x</span><!-- //关闭按钮-->
</div>

JS：通过jq改变弹出层的样式，把它改成position: 'fixed'，这样弹出层就可以浮动了

function showMask(){
$("#mask").css("height",$(document).height());
$("#mask").css("width",$(document).width());
$("#mask").show(); var $Popup = $('.popup-kk');
//$(window).height()代表了当前可见区域的的高度，
//$(window).scrollTop() 获取垂直滚动的距离 (即当前滚动的地方的窗口顶端到整个页面顶端的距离)
// alert(($(window).height() - $Popup.height()) / 2 + $(window).scrollTop()) console.log($(window).height()+"-"+$Popup.height())
console.log($(window).scrollTop())
$Popup.css({
left: ($('body').width() - $Popup.width()) / 2+ 'px',
top:($(window).height() - $Popup.height()) / 2+"px",
display: 'block',
position: 'fixed'
})
}$('.close').click(function() {
$('#mask,.popup-kk').css('display', 'none');
})

以上就是就是弹出层的效果，如果大家嫌麻烦，我推荐使用layui（https://www.layui.com)；