1. 程式人生 > >css heml js 遮罩

css heml js 遮罩

css
#bg{
    position: absolute; 
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color:#000;
    z-index:1001;
    opacity:0.40;
}
#show{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140px;
    height: 40px;
    margin-left:-70px;
    margin-top:-20px;
    border: solid 2px #D3D3D3;
    background-color: white;
    z-index:1002;
}
#show img {
    float: left;
    margin-right: 10px;
    margin-left: 5px;
    margin-top: 12px;
}
#show div {
    float: left;
    margin-top: 12px;
    font-size:12px;
}

html

<div id="box" style="display:none">
    <div id="bg">
    </div>
    <div id="show">
        <img src="/Content/skin/Default/Image/loading.gif" />
        <div><span>處理中,請等待...</span></div>
    </div>
</div>
js
function showdiv() {
    document.getElementById("box").style.display = "block";
}
function hidediv() {
    document.getElementById("box").style.display = 'none';
}