La fenêtre popup ne défile pas

Question

Je sais que c'est probablement une question de base, mais j'ai essayé toutes les solutions et je n'arrive pas à faire défiler verticalement ma fenêtre.

J'ai donc un élément 'p' sur lequel un individu peut cliquer et montrer plusieurs commentaires. La fenêtre s'ouvre, cependant, le texte dans la fenêtre contextuelle s'étend au-delà du bas sans qu'il soit défilable.

Toute aide pour faire défiler la fenêtre est appréciée.

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

Vous avez seulement besoin d'ajouter une hauteur spécifique dans votre classe modal-content (50% par exemple):

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>

est ce droit?

Answer 3

Essayez d'ajouter overflow-y:scroll; à votre modal-content css. Cela permettra le défilement le long de l'axe des y (verticalement).

Answer 4

Modal scroll

Peut-être que ce violon peut vous aider.

Je viens d'ajouter height dans 'modal-header' et 'modal-content'.

Déplacez également border de 'modal-content' vers 'modal'.

Si vous ajoutez la classe 'modal header', vous pouvez toujours voir le bouton de fermeture.