弹出窗口不可滚动

我知道这可能是一个基本问题，但我已经尝试了每个解决方案，并且我似乎无法让我的弹出窗口垂直滚动。弹出窗口不可滚动

所以我有一个'p'元素，一个人可以点击并显示几条评论。窗口弹出，但是，弹出窗口中的文本超出了底部而不能滚动。

赞赏让窗口滚动的任何帮助。

var modal = document.getElementById('myModal'); 
 
var btn = document.getElementById('myBtn'); 
 
var span = document.getElementsByClassName('close')[0]; 
 

 
btn.onclick = function() { 
 
    modal.style.display = "block"; 
 
} 
 

 
span.onclick = function() { 
 
    modal.style.display = "none"; 
 
} 
 

 
window.onclick = function(event) { 
 
    if (event.target == modal) { 
 
    modal.style.display = "none"; 
 
    } 
 
}

.modal { 
 
    display: none; 
 
    position: fixed; 
 
    z-index: 1; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: auto; 
 
    background-color: rgb(0, 0, 0); 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
} 
 

 
.modal-content { 
 
    background-color: #fefefe; 
 
    margin: 15% auto; 
 
    padding: 20px; 
 
    overflow: auto; 
 
    border: 1px solid #888; 
 
    width: 80%; 
 
} 
 

 
.close { 
 
    color: #aaa; 
 
    float: right; 
 
    font-size: 28px; 
 
    font-weight: bold; 
 
} 
 

 
.close:hover, 
 
.close:focus { 
 
    color: black; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
}

<p id="myBtn">See what our customers are saying</p> 
 

 
<div id="myModal" class="modal"> 
 
    <div class="modal-content"> 
 
    <span class="close">&times;</span> 
 
    <p>...</p> 
 
    <p>...</p> 
 
    <p>...</p> 
 
    <p>...</p> 
 
    </div> 
 
</div>

来源

2017-10-12 mur7ay

你只需要在你的modal-content类（例如50％），增加一个特定的高度：

https://jsfiddle.net/8p0moxjz/

来源

2017-10-12 01:30:21

工作！如此简单。 – mur7ay

很高兴帮助您 –

var modal = document.getElementById('myModal'); 
 
var btn = document.getElementById('myBtn'); 
 
var span = document.getElementsByClassName('close')[0]; 
 

 
btn.onclick = function() { 
 
    modal.style.display = "block"; 
 
} 
 

 
span.onclick = function() { 
 
    modal.style.display = "none"; 
 
} 
 

 
window.onclick = function(event) { 
 
    if (event.target == modal) { 
 
    modal.style.display = "none"; 
 
    } 
 
}

.modal { 
 
    display: none; 
 
    position: fixed; 
 
    z-index: 1; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: auto; 
 
    background-color: rgb(0, 0, 0); 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
} 
 

 
.modal-content { 
 
    background-color: #fefefe; 
 
    margin: 15% auto; 
 
    padding: 20px; 
 
    overflow: auto; 
 
    border: 1px solid #888; 
 
    width: 80%; 
 
} 
 

 
.close { 
 
    color: #aaa; 
 
    float: right; 
 
    font-size: 28px; 
 
    font-weight: bold; 
 
} 
 

 
.close:hover, 
 
.close:focus { 
 
    color: black; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
} 
 
.close{ 
 
    position:fixed; 
 
     position: fixed; 
 
    right: 70px; 
 
    top: 115px; 
 
} 
 
.modal-content{ 
 
height:100px; 
 
overflow-y:scroll; 
 
}

<p id="myBtn">See what our customers are saying</p> 
 

 
<div id="myModal" class="modal"> 
 
    <div class="modal-content"> 
 
    <span class="close">&times;</span> 
 
    <p>...</p> 
 
    <p>...</p> 
 
    <p>...</p> 
 
    <p>...</p> 
 
    </div> 
 
</div>

这是正确的？

来源

2017-10-12 01:27:08

尝试增加overflow-y:scroll;您modal-content CSS。这将允许沿Y轴（垂直）滚动。

来源

2017-10-12 01:30:30 Laura

不幸的是，我已经尝试过，但没有奏效。 – mur7ay

Modal scroll

也许这拨弄可以帮助你。

我刚刚将height添加到'模态标题'和'模态内容'中。

还将border从'模态内容'移动到'模态'。

如果添加'模态头'类，您可以始终看到关闭按钮。

来源

2017-10-12 01:38:05

我能够通过给'模态内容'类添加一个特定的高度来使它工作。 – mur7ay

@ mur7ay是的，我已经看过@GilbertoSanchez的小提琴了。我只是想向你展示的是当你滚动时，'关闭按钮'将被滚动为与模式中的内容相同，因此分离内容和标题可以使固定按钮。 :) –

弹出窗口不可滚动

回答

相关问题