Html 如何在此 CSS javascript 弹出窗口中添加滚动条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18213771/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add scrollbar in this CSS javascript pop up window?
提问by So Kim
I am new to javascript and CSS. Is there anybody know that how to add scroll bar in this pop up window???
我是 javascript 和 CSS 的新手。有没有人知道如何在这个弹出窗口中添加滚动条？？？
Please help.
请帮忙。
<style type="text/css">
#PopupOverlay {
display: none;
position: fixed;
left: 0px; right: 0px;
top: 0px; bottom: 0px;
background-color: #000000;
opacity:.75;
}
#PopupWindow {
display: none;
position: absolute;
width: 600px; height: 400px;
left: 50%; top: 50%;
margin: -155px 0 0 -300px;
border: solid 2px #cccccc;
background-color: #ffffff;
}
#PopupWindow h1 {
display: block;
margin: 0;
padding: 3px 5px;
background-color: #cccccc;
text-align: center;
}
Here is the java script part..........................
这里是java脚本部分......................................
<script type="text/javascript"> function OpenPopup() { document.getElementById('PopupOverlay').style.display = 'block'; document.getElementById('PopupWindow').style.display = 'block'; } function ClosePopup() { document.getElementById('PopupOverlay').style.display = 'none'; document.getElementById('PopupWindow').style.display = 'none'; }
<script type="text/javascript"> function OpenPopup() { document.getElementById('PopupOverlay').style.display = 'block'; document.getElementById('PopupWindow').style.display = 'block'; } function ClosePopup() { document.getElementById('PopupOverlay').style.display = 'none'; document.getElementById('PopupWindow').style.display = 'none'; }
回答by Tom
I agree with Coop, buf if you only want vertical scroll bars it would be the following.
我同意 Coop, buf 如果您只想要垂直滚动条，它将是以下内容。
#PopupWindow { overflow-y:scroll }
Edit: Also with that bit of code you have there, may want to set the z-index of the PopupWindow to a larger value than the PopupOverlay.
编辑：同样使用您在那里的那段代码，可能希望将 PopupWindow 的 z-index 设置为比 PopupOverlay 更大的值。
#PopupOverlay {
display: none;
position: fixed;
left: 0px; right: 0px;
top: 0px; bottom: 0px;
background-color: #000000;
opacity:.75;
z-index:5;
}
#PopupWindow {
display: none;
position: absolute;
width: 600px; height: 400px;
left: 50%; top: 50%;
margin: -155px 0 0 -300px;
border: solid 2px #cccccc;
background-color: #ffffff;
overflow-y:scroll;
z-index:10;
}
回答by Coop
#PopupWindow { overflow: scroll; }
