这两天博主一位好基友准备搞个弹出层弹出链接，用了各种插件都不如意，想了下弹窗效果还是很简单的，只需用JavaScript代码简单控制下就好了。于是我劝他用代码自己写一个，自此他走上了一条不归路，好几天没玩儿游戏。今天看他还没弄好，顺手出个教程，嘿嘿。
jQuery与CSS代码实现简单的弹出层效果
弹出层原理
弹出层可以理解为两部分，一层是我们要显示给用户看的（弹出层），一层是遮住原来内容（遮罩层），表示这些内容暂时不让看的。我们只需要在用户点击了需要弹出的按钮或者文字或者图片等等的元素时，将原先默认不显示的遮罩层显示出来，这里可以使用css的display属性来实现。然后再将弹出层也显示出来，一样的操作。在关闭时，我们可以监听遮罩层被点击事件，被点击就将弹出层和遮罩层都隐藏，即display属性设置为none。具体效果如代码狗博客的文末打赏弹窗，本文末尾就有，大家可以看看效果。
实现代码
html
复制
<div class="rewards-popover-mask" data-event="rewards-close" >//遮罩层
//弹出层
<div class="rewards-popover" >
<h3>标题
<div class="rewards-popover-item">
<h4>支付宝扫一扫打赏
<img src="图片地址">
<div class="rewards-popover-item">
<h4>微信扫一扫打赏
<img src="图片地址">
<span class="rewards-popover-close" data-event="rewards-close">关闭</span>//关闭按钮或者点击遮罩层CSS
复制
/*弹出层遮罩*/
.rewards-popover-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 9999;
display: none;
}
/*打赏弹出层*/
.rewards-popover {
position: fixed;
top: 50%;
left: 50%;
margin: -200px 0 0 -275px;
width: 550px;
background-color: #FFF;
padding: 40px 20px 50px;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
z-index: 9999;
display: none;
text-align: center;
}
.rewards-popover h3 {
font-size: 18px;
font-weight: bold;
text-align: center;
margin: 0 15px 30px;
}
.rewards-popover-item {
display: inline-block;
width: 200px;
margin: 0 20px;
}
.rewards-popover-close {
position: absolute;
top: 0;
right: 0;
padding: 15px;
font-size: 16px;
line-height: 1;
color: #999;
cursor: pointer;
}
.rewards-popover-item h4 {
margin: 0 20px 10px;
font-size: 15px;
}
.rewards-popover-item img {
width: 200px;
height: 200px;
background-color: #eee;
border-radius: 2px;
padding: 5px;
}JS 注意：这里的JavaScript基于jQuery，请在功能被调用之前先加载jQuery！
复制
//打赏控制
$('.action-rewards').on('click', function(e){ //触发弹窗.action-rewards为你的触发元素class名称，或者使用id等具体查看jQuery选择器
$('.rewards-popover-mask').css("display","block");//显示遮罩层
$('.rewards-popover').css("display","block");//显示弹出层
});
$('.rewards-popover-close').on('click', function(e){ //关闭按钮.rewards-popover-close被点击事件
$('.rewards-popover-mask').css("display","none");//隐藏遮罩层
$('.rewards-popover').css("display","none");//隐藏弹出层
});
$('.rewards-popover-mask').on('click', function(e){ //遮罩层.rewards-popover-mask被点击事件
$('.rewards-popover-mask').css("display","none");//隐藏遮罩层
$('.rewards-popover').css("display","none");//隐藏弹出层
});好了到此弹窗效果就出来了，如果你的网站是响应式的，你还应该为弹出层配上媒体查询以实现不同设备都能正常显示，否则。。。会很大的哟，上面的是最大效果（1200px）。
评论 （0）