点击弹出带有遮罩的窗口效果
分类：实例代码
分享一段代码实例，它实现了点击可以弹出层效果。
这个层在窗口中居中，且带有半透明这招层。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
.click_pop {
display: block;
width: 160px;
margin: 100px auto;
line-height: 40px;
background-color: #60A1C9;
color: #fff;
}
.bgPop {
display: none;
position: absolute;
z-index: 9;
left: 0;
top: 0;
background: rgba(0,0,0,.2);
}
.pop {
display: none;
width: 500px;
height: 300px;
position: absolute;
top: 0;
left: 0;
z-index: 10;
border-radius: 35px;
background-color: #ffe;
box-shadow: 0 3px 18px rgba(0, 0, 0, .5);
}
.pop p {
padding: 50px;
}
.cancel, .ok {
position: absolute;
bottom: 30px;
left: 280px;
width: 80px;
height: 30px;
border: none;
border-radius: 15px;
background-color: #00BA98;
color: #fff;
cursor: pointer;
}
.cancel {
background-color: #999;
left: 150px;
}
input:focus {
outline: none;
}
.pop-inner {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function() {
var $win = $(window);
var $pop = $('.pop');
//init()
function init() {
$('.bgPop').css({
'width': $win.width(),
'height': $win.height()
});
$pop.css({
'left': ($win.width() - $pop.width()) / 2,
'top': ($win.height() - $pop.height()) / 2
});
}
init();
//dragDrop
var move = false;
var offsetX = 0;
var offsetY = 0;
$pop.mousedown(function(e) {
e.stopPropagation();
move = true;
offsetX = e.offsetX;
offsetY = e.offsetY;
$pop.css({
'cursor': 'move'
});
}).mouseup(function() {
move = false;
$pop.css({
'cursor': 'default'
});
});
$(document).mousemove(function(e) {
if (!move) return;
var x = e.clientX - offsetX;
var y = e.clientY - offsetY;
if (!(x < 0 || y < 0 || x > $pop.position().left * 2 || y > $pop.position().top * 2)) {
$pop.css({
'left': x,
'top': y
});
}
});
//click
$('.click_pop').click(function(e) {
init();
$win.resize(function() {
var wWidth = $win.width();
var wHeight = $win.height();
$('.bgPop').css({
'width': wWidth,
'height': wHeight
});
$pop.css({
'left': (wWidth - $pop.width()) / 2,
'top': (wHeight - $pop.height()) / 2
});
});
$('.bgPop,.pop').show();
});
$('.cancel').click(function(e) {
$('.bgPop,.pop').hide();
});
})
</script>
</head>
<body>
<button class="click_pop">show</button>
<div class="bgPop"></div>
<div class="pop">
<p></p>
<input type="button" value="Cancel" class="cancel" />
<input type="button" value="OK" class="ok" />
</div>
</body>
</html>
点击弹出带有遮罩的窗口效果，这样的场景在实际项目中还是用的比较多的，关于点击弹出带有遮罩的窗口效果就介绍到这了。
点击弹出带有遮罩的窗口效果属于前端实例代码，有关更多实例代码大家可以查看。