jquery实现界面点击按钮弹出悬浮框
时间：2022-09-04 10:41:46|栏目：jquery|点击： 次
本文实例为大家分享了jquery实现界面点击按钮弹出悬浮框的具体代码，供大家参考，具体内容如下
首先定义两个div:
一个是背景，一个是悬浮窗。
<input id="Button1" type="button" value="点击弹出层"/> <!--弹出层时背景层DIV--> <div id="fade" class="black_overlay"></div> <!-- 编辑框 可以加自己的样式 --> <div id="MyDiv" class="white_content"> 点击阴影处退出！！！ </div>
css样式：
<style>
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
border: 16px solid lightblue;
background-color: white;
z-index: 1002;
overflow: auto;
}
.white_content_small {
display: none;
position: absolute;
top: 20%;
left: 30%;
width: 40%;
height: 50%;
border: 16px solid lightblue;
background-color: white;
z-index: 1002;
overflow: auto;
}
</style>
jquery方法：
<script type="text/javascript">
$("#Button1").click(function() {
document.getElementById("MyDiv").style.display = 'block';
document.getElementById("fade").style.display = 'block';
var bgdiv = document.getElementById("fade");
bgdiv.style.width = document.body.scrollWidth;
$("#fade").height($(document).height());
});
//关闭弹出层
$("#fade").click(function() {
document.getElementById("MyDiv").style.display = 'none';
document.getElementById("fade").style.display = 'none';
});
</script>
效果图：
