问题:要覆盖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:继承父级定位方式