弹出的css实现

来源：互联网发布：暗黑3 数据库 2.61 编辑：程序博客网时间：2024/05/14 23:47

实现点击弹出，展现弹出层，点击关闭，关闭弹出层。

弹出层的fixed，里面的内容absoute。注意弹出层overflow哦

.body-wrap{

width: 100%;
height: 2000px;
}
.button-small{
display: block;
width: 100px;
height: 50px;
background-color: #39BEE7;
border-radius: 5px;
text-align: center;
border: none;
cursor: pointer;
}
.tan-wrap{
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
overflow: auto;
}
.tan-background{
width: 100%;
height: 1600px;
background-color: antiquewhite;
opacity: .3;
}
.tan-content{
width: 100%;
position: absolute;
top:0px;
left: 0px;
}
.tan-content-div{
width: 500px;
height: 1500px;
border: 1px solid red;
margin: 50px auto;

}
</style>

</head>
<body>

<div class="body-wrap">
<input class="button-small" type="button" name="tanchu" id="tanchu" value="弹出">
</div>
<div class="tan-wrap" style="display: none;" id="tanwrap">
<div class="tan-background"></div>
<div class="tan-content">
<div class="tan-content-div">
<input class="button-small" type="button" name="guanbi" id="guanbi" value="close">

</div>
</div>
</div>
<script src="../js/libs/jquery-1.11.3.js">
</script>
<script>
$("#tanchu").click(function () {
$("body").css({"overflow":"hidden"});
$("#tanwrap").css({"display":"block"});
});

$("#guanbi").click(function () {
$("body").css({"overflow":"auto"});
$("#tanwrap").css({"display":"none"});
});
</script>.body-wrap{
width: 100%;
height: 2000px;
}
.button-small{
display: block;
width: 100px;
height: 50px;
background-color: #39BEE7;
border-radius: 5px;
text-align: center;
border: none;
cursor: pointer;
}
.tan-wrap{
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
overflow: auto;
}
.tan-background{
width: 100%;
height: 1600px;
background-color: antiquewhite;
opacity: .3;
}
.tan-content{
width: 100%;
position: absolute;
top:0px;
left: 0px;
}
.tan-content-div{
width: 500px;
height: 1500px;
border: 1px solid red;
margin: 50px auto;

}
</style>

</head>
<body>

<div class="body-wrap">
<input class="button-small" type="button" name="tanchu" id="tanchu" value="弹出">
</div>
<div class="tan-wrap" style="display: none;" id="tanwrap">
<div class="tan-background"></div>
<div class="tan-content">
<div class="tan-content-div">
<input class="button-small" type="button" name="guanbi" id="guanbi" value="close">

</div>
</div>
</div>
<script src="../js/libs/jquery-1.11.3.js">
</script>
<script>
$("#tanchu").click(function () {
$("body").css({"overflow":"hidden"});
$("#tanwrap").css({"display":"block"});
});

$("#guanbi").click(function () {
$("body").css({"overflow":"auto"});
$("#tanwrap").css({"display":"none"});
});

</script>

0 0