添加一个页面覆盖

来源：互联网发布：淘宝卖家手机端装修编辑：程序博客网时间：2024/06/01 08:45

问题：要覆盖Web页面以显示一条消息，一张照片或者一个表单
解决方案：为一个div元素提供一个样式表设置，使其大小和位置能够覆盖整个web

<!DOCTYPE html><html><head>    <title>Overlay</title>    <style>        .overlay{            background-color: #000;            opacity: 0.5;            filter: alpha(opacity=50);            position: fixed;            top: 0;            left: 0;            width: 100%;height: 100%;            z-index: 10;        }        .overlymsg{            position: absolute;            background-color: yellow;            padding: 10px;            width: 200px;            height: 200px;            font-size: 2em;            z-index: 11;            top: 50%;            left: 50%;            margin-left: -100px;            margin-top: -100px;        }    </style>    <script type="text/javascript">    function displayPopup(){        var overlay = document.createElement("div");        overlay.id = "overlay";        overlay.setAttribute("class","overlay");        document.body.appendChild(overlay);        //创建一个图形        var msg = document.createElement("div");        var txt = document.createTextNode("Please join our mailing list !(Click to close.)");        msg.appendChild(txt);        msg.id="msg";        msg.setAttribute("class","overlymsg");        msg.onclick = restore;        document.body.appendChild(msg);    }    function restore(){        document.body.removeChild(document.getElementById("overlay"));        document.body.removeChild(document.getElementById("msg"));    }    window.onload = function(){        displayPopup();    }    </script></head><body><p>Existing material</p></body></html>

知识点：透明度的设置：opacity: 0.5;filter: alpha(opacity=50);
position的设置：
+ static：默认值，没有定位，元素正常出现在文档中
+ absolute：相对static定位以外的第一个父级元素生成绝对定位
+ fixed：相对浏览器窗口生成绝对定位
+ relative：相对正常位置生成相对定位
+ inherit：继承父级定位方式

阅读全文

0 0