0

通过单击按钮，该 div 应该是弹出和可滚动的。当我向下滚动时，div 在中间是静态的。我已经改变了css位置：固定，仍然没有运气。帮助我使 div 可滚动。

<button onClick="openPopup();">click here</button>
<div id="test" class="popup">
    <div class="cancel" onclick="closePopup();"></div>
</div>

<style>
.popup{
    position:fixed;
    top:0px;
    left:0px;
    margin:0px;
    width: 1250px;
    height: 750px;
    font-family:verdana;
    font-size:13px;
    padding:2px;
    background-color:white;
    border:2px solid grey;
    z-index:100000000000000000;
    display:none;
    opacity:0.6;
    filter:alpha(opacity=60); 
    }

.cancel{
    display:relative;
    cursor:pointer;
    margin:0;
    float:right;
    height:10px;
    width:14px;
    padding:0 0 5px 0;
    background-color:red;
    text-align:center;
    font-weight:bold;
    font-size:11px;
    color:white;
    border-radius:3px;
    z-index:100000000000000000;
    }   
.cancel:hover{
    background:rgb(255,50,50);
    }
</style>

<script>
function openPopup() {
    document.getElementById('test').style.display = 'block';
}
function closePopup() {
    document.getElementById('test').style.display = 'none';
}    
</script>
4

4 回答 4

2

使用这个：

<div class="popup" style="overflow: auto;">

或者在 CSS 文件中：

.popup {
   overflow: auto;
}

如果内容溢出，属性auto中的值将显示一个滚动条。overflow如果使用该scroll值，即使元素的内容没有溢出，它也会显示滚动条。

于 2013-06-18T05:53:13.557 回答
1

用这个：-

.popup{ overflow:scroll; }
于 2013-06-18T05:48:58.123 回答
0

试试这个：

<html>
<body>
<button onClick="openPopup();">click here</button>
<div id="test" class="popup" style="overflow: scroll;">
    <div class="cancel" onclick="closePopup();"></div>
    <br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br />
</div>
<style>
.popup{
    top:0px;
    left:0px;
    margin:0px;
    width: 500px;
    height: 500px;
    font-family:verdana;
    font-size:13px;
    padding:2px;
    background-color:white;
    border:2px solid grey;
    z-index:100000000000000000;
    display:none;
    opacity:0.6;
    filter:alpha(opacity=60); 
    }

.cancel{
    display:relative;
    cursor:pointer;
    margin:0;
    float:right;
    height:10px;
    width:14px;
    padding:0 0 5px 0;
    background-color:red;
    text-align:center;
    font-weight:bold;
    font-size:11px;
    color:white;
    border-radius:3px;
    z-index:100000000000000000;
}   
.cancel:hover{
    background:rgb(255,50,50);
}
</style>

<script type="text/javascript">
function openPopup() {
    document.getElementById('test').style.display = 'block';
}
function closePopup() {
    document.getElementById('test').style.display = 'none';
}    
</script>
</body>
</html>

希望这可以帮助。

于 2013-06-18T05:55:57.877 回答
0

这是小提琴：

我认为您希望在滚动页面时修复 div。我已经改变了弹出窗口的高度和宽度。只是为了测试增加的身体高度。你可以删除它。

.popup{
  position: fixed;
  top: 100px;
  left: 100px;
  margin: 0px;
  width: 100px;
  height: 100px;
  font-family: verdana;
  font-size: 13px;
  padding: 2px;
  background-color: white;
  border: 2px solid grey;
  z-index: 100000000000000000;
  display: none;
  opacity: 0.6;
  filter: alpha(opacity=60);
}

body {
  height: 1000px;
}
于 2013-06-18T06:00:25.843 回答