HTML实现遮罩层的方法 HTML中如何使用遮罩层

    <div id="loadingTip" class="loading-tip">  

        <img src="images/loading.gif" />  

    </div>  

    <!-- 模拟模态窗口DIV -->  

    <div class="modal" id="modalDiv"></div>  

    <script type='text/javascript' src="js/jquery-1.10.2.js"></script>  

    <script type="text/javascript" src="js/index.js"></script>  

</body>  

</html>  

index.css

CSS Code复制内容到剪贴板

* {   

    margin: 0;   

    padding: 0;   

}   

html, body {   

    width: 100%;   

    height: 100%;   

    font-size: 14px;   

}   

div.header {   

    width: 100%;   

    height: 100px;   

    border-bottom: 1px dashed blue;   

}   

div.title-outer {   

    position: relative;   

    top: 50%;   

    height: 30px;   

}   

span.title {   

    text-align: left;   

    position: relative;   

    left: 3%;   

    top: -50%;   

    font-size: 22px;   

}   

div.body {   

    width: 100%;   

}   

.overlay {   

    position: absolute;   

    top: 0px;   

    left: 0px;   

    z-index: 10001;   

    display:none;   

    filter:alpha(opacity=60);   

    background-color: #777;   

    opacity: 0.5;   

    -moz-opacity: 0.5;   

}   

.loading-tip {   

    z-index: 10002;   

    position: fixed;   

    display:none;   

}   

.loading-tip img {   

    width:100px;   

    height:100px;   

}   

.modal {   

    position:absolute;   

    width: 600px;   

    height: 360px;   

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!