本文实例为大家分享了jq实现界面点击按钮 弹出悬浮框的具体代码,供大家参考,
首先定义两个div:
一个是背景,一个是悬浮窗。
html
<div>
<input class="Dialog_button" type="button" value="点击弹出层" />
<!--弹出层时背景层DIV-->
<div id="fade" class="black_overlay"></div>
<!-- 编辑框 可以加自己的样式 -->
<div id="MyDiv" class="Dialog_content pd20">
6666
</div>
css
/* 弹框 */
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: rgb(0, 0, 0, 0.5);
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
.Dialog_content {
display: none;
position: absolute;
top: 10%;
width: 800px;
height: 80%;
background-color: white;
z-index: 1002;
overflow: auto;
}
jq
//关闭弹出层
$("#fade").click(function () {
$("#MyDiv").hide();
$("#fade").hide();
});
$(".Close_Dialog").click(function () {
$("#MyDiv").hide();
$("#fade").hide();
});