ポップアップウィンドウがスクロールできない

Question

これはおそらく基本的な質問ですが、すべての解決方法を試しました。ポップアップウィンドウを垂直方向にスクロールさせることができません。

私は個人がクリックしていくつかのレビューを表示できる '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>

Answer 1

あなただけのあなたのmodal-contentクラス（例えば50％）で、特定の高さを追加する必要があります：あなたのmodal-content CSSにoverflow-y:scroll;を追加してみてください

https://jsfiddle.net/8p0moxjz/

Answer 2

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>

この権利ですか？

Answer 3

を。これにより、y軸（垂直方向）に沿ったスクロールが可能になります。

Answer 4

Modal scroll

たぶん、このバイオリンはあなたを助けることができます。

「modal-header」と「modal-content」にheightを追加しました。

borderも ​​'modal-content'から 'modal'に移動してください。

「モーダルヘッダー」クラスを追加すると、常に閉じるボタンが表示されます。