.overbox{
width: 100%;
height: 100%;
position: fixed;
top: 0;
background-color: rgba(34, 32, 32, 0.3);
.indisebox{
width: 90%;
height: 300px;
margin: 0 auto;
position:absolute;
top:50%;
left:50%;
border-radius: 5px;
-webkit-transform: translate(-50%,-50%);
background-color: #fff;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>弹出居中</title>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="./jquery按钮样式切换/js/jquery-1.11.1.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.testBg {
position: fixed;
top: 0;
background-color: rgba(34, 32, 32, 0.3);
display: none;
}
.testCont {
position: fixed;
top: 0;
left: 0;
width: 500px;
height: 300px;
border: 1px #1435eb solid;
color: #c517a8;
display: none;
}
</style>
</head>
<body>
<section class="test">
<input type="button" class="testButton" value="弹出遮罩" />
</section>
<section class="testBg"></section>
<section class="testCont">
弹出层
</section>
</body>
<script>
$(function () {
$(".testBg").height($(window).height()).width($(window).width());
$(".testButton").click(function () {
$(".testBg").show();
$(".testCont").show();
showDiv();
})
})
function showDiv() {
var testContTop = ($(window).height() - $(".testCont").height()) / 2;
var testContWidth = ($(window).width() - $(".testCont").width()) / 2;
$(".testCont").css({
"top": testContTop,
"left": testContWidth
});
}
</script>
</html>
2841
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
