CSS部分
<!-- 弹出框样式 -->
<style type="text/css">
.balk{
display: none;
position: fixed;
width: 100%;
height: 100%;
z-index: 2;
background: rgba(0,0,0,0.8);
top:0;
left:0;
}
.dialog{
display: none;
position: fixed;
z-index: 3;
width: 752px;
min-height: 504px;
top: 29%;
left: 34%;
margin: -150px 0 0 -250px;
background: #fff;
pause-before: 15px;
border-radius: 5px;
}
</style>
HTML部分
<!-- 弹框层 tk -->
<!-- 遮罩层 -->
<div class="blak" id="blak"></div>
<!-- 弹出框盒子 -->
<div class="dialog" id="dialogBox" style="background-color: rgb(239, 239, 239);">
<span class="dialog_close" style="padding-left: 95%;font-size: 20px; color: red;"> X</span>
<h3 class="dialog_title" style="float: left; margin-top: -18px; padding-left: 12px;">表单信息预览</h3>
<div class="dialog_content" style="margin-top: 27px;padding-left: 13px;">
<table class="table table-striped table-bordered table-hover" id="showTime">
</table>
</div>
</div>
<!-- tk -->
<a class="btn btn-mini btn-primary" id="YL" οnclick="look();">预览</a>
jquery部分
/* 预览部分 */
var doc = document;
var Back = doc.getElementById("blak");
DialogBox =doc.getElementById("dialogBox");
DialogClose = doc.getElementsByClassName("dialog_close")[0];
function look(){
//显示遮罩层
Back.style.display = "block";
//显示弹出窗口
DialogBox.style.display = "block";
//预览按钮的禁用
$("#YL").attr("disabled","true");
// append 重绘部分
$("#showTime").append('');//根据自己的需求进行 填充
}
DialogClose.onclick = function(){
//隐藏遮罩层
Back.style.display = "none";
//隐藏弹出窗口
DialogBox.style.display = "none";
//移除预览按钮的禁用状态
$("#YL").removeAttr("disabled");
$("#showTime").html(""); //清除
}