最近在写前端界面时,用到一个遮罩板,开始使用的是BootStrap上的遮罩板组建,但是后来发现BootStrap上的遮罩板封装得太彻底了,导致一些功能不能实现。于是自己根据网上的博客仿照着BootStrap的遮罩板写了一个遮罩板以后用,于是给大家分享一下。下面是代码,大家直接复制粘贴就可以使用了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet">
<!-- 可选的Bootstrap主题文件(一般不使用) -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>全屏div</title>
<style>
#back {
width:100%;
height:100%;
background-color:#000;
position:absolute;
top:0;
left:0;
z-index:2;
opacity:0.3;
display:none;
}
#log_window {
border-radius:6px;
width:45%;
height:50%;
background-color:#FFF;
margin:auto;
position:absolute;
z-index:3;
top: 0;
bottom:0;
left: 0;
right: 0;
display:none;
}
</style>
<script>
function shield(){
var s = document.getElementById("back");
s.style.display = "block";
var l = document.getElementById("log_window");
l.style.display = "block";
}
function cancel_shield(){
var s = document.getElementById("back");
s.style.display = "none";
var l = document.getElementById("log_window");
l.style.display = "none";
}
</script>
</head>
<body>
<a href="javascript:shield()">打开遮罩</a>
<div id="back"></div>
<div id="log_window">
<divstyle="height:5%;width:100%;">
<h3 align="center">遮罩窗体</h3>
</div>
<hr>
<divstyle="height:55%;width:100%;">
<table style="width:400px;"
class="table table-bordered table-hover"id="sample-table"
align="center">
<inputtype="hidden"name="dictionaryId_ud"id="dictionaryId_ud"/>
<trstyle="text-align:center;">
<td colspan="3">父类型</td>
<td colspan="3"><selectstyle="height:100%;width: 60%"
name="faType_ud"id="faType_ud">
</select></td>
</tr>
<trstyle="text-align:center;">
<td colspan="3">数据类型</td>
<tdcolspan="3"><inputtype="text"name="dataType_ud"
id="dataType_ud"></td>
</tr>
<trstyle="text-align:center;">
<td colspan="3">数据值</td>
<tdcolspan="3"><inputtype="text"name="dataValue_ud"
id="dataValue_ud"></td>
</tr>
<trstyle="text-align:center;">
<td colspan="3">字典类型</td>
<tdcolspan="3"><inputtype="text"name="dictionaryType_ud"
id="dictionaryType_ud"></td>
</tr>
<trstyle="text-align:center;">
<td colspan="3">排序值</td>
<tdcolspan="3"><inputtype="text"name="orderValue_ud"
id="orderValue_ud"></td>
</tr>
</table>
</div>
<hr></hr>
<divstyle="height:20%;width:100%;">
<buttonstyle="float:right;margin-right:2%;"class="btn btn-primary">保存</button>
<buttonstyle="float:right;margin-right:1%;"class="btn btn-default"onclick="cancel_shield();">取消</button>
</div>
</div>
</body>
</html>