jquery + append 弹框 + disabled 的按钮属性

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("");  //清除


}