遮罩板，蒙板【前端组件】

来源：互联网发布：autoit python 编辑：程序博客网时间：2024/06/06 17:49

最近在写前端界面时，用到一个遮罩板，开始使用的是BootStrap上的遮罩板组建，但是后来发现BootStrap上的遮罩板封装得太彻底了，导致一些功能不能实现。于是自己根据网上的博客仿照着BootStrap的遮罩板写了一个遮罩板以后用，于是给大家分享一下。下面是代码，大家直接复制粘贴就可以使用了。

<!DOCTYPE html>

<html>

<head>

<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>

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>

<divstyle="height:5%;width:100%;">

</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"/>