彈出窗口不可滾動

我知道這可能是一個基本問題，但我已經嘗試了每個解決方案，並且我似乎無法讓我的彈出窗口垂直滾動。彈出窗口不可滾動

所以我有一個'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的小提琴了。我只是想向你展示的是當你滾動時，'關閉按鈕'將被滾動爲與模式中的內容相同，因此分離內容和標題可以使固定按鈕。 :) –

彈出窗口不可滾動

回答

相關問題