我有一个调用脚本的书签，并在网页上放置一个css覆盖。顶部有一个按钮可以关闭它，其余的只是一个半透明背景的div。选择一个随机网站，它看起来很好，但是，例如，谷歌的顶部栏覆盖它，以及搜索和按钮覆盖叠加层。另一个例子是reddit的标题。
我制作这些div和按钮：
var overlayBackground = document.createElement('div'); //main overlay that covers the page
overlayBackground.setAttribute('id', "overlay_background");
document.body.appendChild(overlayBackground);
var topBar = document.createElement('div');
topBar.setAttribute('id', "top_bar");
overlayBackground.appendChild(topBar);
function cancelStuff(){
overlayBackground.removeChild(topBar);
document.body.removeChild(overlayBackground);
}
topBar.innerHTML = "<button id= \"cancel_stuff\" onclick=\"cancelStuff()\">Click To Cancel</button>";
这是css：
#cancel_stuff{
zIndex:2147483647;
font-weight:bold;
font-size:2em;
border:none;
width:100%;
height:50px;
color:#FF9900;
background-color:#336688;
}
#cancel_stuff:hover{
cursor: pointer;
color:#336688;
background-color:#FF9900;
}
#top_bar{
zIndex:2147483647;
box-shadow:0px 3px 10px 2px black;
position:fixed;
top:0px;
width:100%;
height:50px;
}
#overlay_background{
float:left;
zIndex:2147483647;
position:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
background:rgba(240, 240, 240,0.8);
}