页面代码+css样式设置
<style>
.zhezhao1 {
position: fixed;
left: 50%;
top: 50%;
/*background: gray;*/
transform: translate(-35%, -30%);
width: 100%;
height: 100%;
z-index: 200;
/*opacity: 0.3;*/
}
.tankuang1 {
/*position: absolute;*/
background: #fff;
width: 35%;
height: 43%;
border-radius: 5px;
margin: 15% auto;
transform: translate(-50%, -50%);
z-index: 200;
opacity: 1;
}
.content input:hover {
cursor: pointer;
}
.content label:hover {
cursor: pointer;
}
</style>
<div style="background-color:aliceblue;width:100%;height:100%">
<input type="button" onclick="dianwo('zhezhao1')" name="name" value="弹窗" />
<!-- 弹窗 -->
<div class="zhezhao1" id='zhezhao1'>
<div class="tankuang1">
<div>
<i class="layui-icon layui-icon-close" style="font-size: 25px; position: absolute; top: 13px; right: 13px; cursor: pointer;" onclick="hidder('zhezhao1')"></i>
</div>
<div id="adddivtest">
<div class="title">
<br />
<h3>审核录入信息</h3>
</div>
<div class="content" style="margin: 30px auto;">
<input type="text" hidden="hidden" id="auditstatus" name="name" value="" />
<input type="radio" name="audit" id="audit1" value="" /><label for="audit1"> 通过</label>
<input type="radio" name="audit" id="audit2" value="" /><label for="audit2"> 未通过</label>
<br />
<textarea id="auditcause" class="form-control form-control-lg" style="display: none; width: 300px; height: 200px; margin: 20px auto" placeholder="审核未通过原因" rows="10" cols="50"></textarea>
<br />
<input class="btnOrangeBig" onclick="upd_auditstatus()" type="button" name="name" value="提交" />
<input class="btnOrangeBig" onclick="hidder('zhezhao1')" type="button" name="name" value="关闭" />
</div>
</div>
</div>
</div>
<!-- 背景遮罩 -->
<div class="layui-layer-shade none" id="beijin" style="display: none; z-index: 100; background-color: rgb(0, 0, 0); opacity: 0.3;position:absolute">
</div>
</div>
js
<script type="text/javascript">
document.getElementById('zhezhao1').style.display = "none";
//关闭弹窗
function hidder(id) {
document.getElementById(id).style.display = "none";
$("#beijin").hide();
}
function dianwo(divid) {
document.getElementById(divid).style.display = "";
}
</script>