How to make modal window scroll on small devices-CodePudding

I am not able to make a modal window scrolling on small devices. Jsfiddle https://jsfiddle.net/yuvgm9nj/

Click on text "Scopri come" to open the modal window.

Maybe something is wrong in js code?

''' // Get the modal var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

'''

Thanks for help. Kind regards.

Filippo

CodePudding user response：

You need to give your modal content div a max height and a relative position.

.modal-content {
  position: relative;
  max-height: 60vh;
  max-width:90vw;
  width: 100%;
}

Rather change your media queries to a mobile first approach:
Define your small device style first and then use @media (min-width:768px) instead.

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

/************ MODAL popup *********/
.modal,
.modal *{
box-sizing: border-box;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 30vmin; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    overflow: auto;
    position: relative;
    max-height: 60vh;
    max-width:90vw;
    width: 100%;
}

/* mobile first */
@media (min-width: 768px) {
    .modal{
       padding-top: 20%; 
        }
    
   .modal-content {
      width: 700px;
    }    
}


.modal-content p{
    font: normal normal 1.0em 'Poppins', sans-serif!important;
    color: #002c9b!important;
    padding: 7px 0;
    text-align: justify;
}

.modal-content .infobooking{
    background-color: #369;
    padding: 0 10px;
}
.modal-content .infobooking p{
    color: white!important;
}

.modal-content p.big{
    font: normal normal 1.3em 'Poppins', sans-serif!important;
    color: #002c9b!important;
    text-align: center;
}

.modal-content h4{
    font: bold normal 1.5em 'Poppins', sans-serif!important;
    color: #000!important;
    border-bottom: 1px solid #000!important;
}

.modal-content h4::before{
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f004";
    color: #C00;
    padding-right: 10px;
}




/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

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



#myBtn{
    cursor: pointer;
    color: #09F;
}
#myBtn:hover{
    color: #40a025;
}

<div class="bcom-head">
<h5>Trova un alloggio a Montaione</h5>
</div>
<div class="bcom-giallo">
<div class="bcom-testo">VisitMontaione in partnership con Booking.com ti offre la scelta di oltre 130 strutture ricettive tra hotel, appartamenti, agriturismo, ville private e b&amp;b.
<strong>E’ facile, veloce e sicuro.</strong></div>
<div class="bcom-pulsante">
</div>
</div>
<div class="bcom-sostieni">
<div class="bcom-sostieni-testo">Inoltre ci aiuterai a sostenere l'informazione di VisitMontaione.com. <!-- Trigger/Open The Modal --><span id="myBtn">Scopri come</span>
<!-- The Modal -->
<div id="myModal" class="modal">

<!-- Modal content -->
<div class="modal-content">

<span class="close">×</span>
<h4>Sostieni Visitmontaione.com</h4>
Ogni giorno lavoriamo costantemente e assiduamente per aggiornare e migliorare tutte le informazioni che trovi su VisitMontaione.

Ci mettiamo tutta la nostra passione nella speranza di farti trascorrere una vacanza indimenticabile, senza risparmiarci niente.
<p class="big"><strong>Per un solo motivo: amiamo ciò che facciamo.</strong></p>
Questo però comporta numerosi costi di gestione che vengono sostenuti esclusivamente da fondi privati e non da contributi pubblici.
<div class="infobooking">

Aiutaci cliccando sul pulsante "PRENOTA ADESSO", sarai reindirizzato alla pagina di ricerca di Booking.com dove potrai inserire le date in cui vuoi fare una vacanza e scegliere la struttura ricettiva che più si adatta alle tue esigenze.

Effettuando una prenotazione "<u>senza uscire dalla pagina</u>", Booking.com riconoscerà a VisitMontaione una parte delle commissioni <u>senza alcun costo aggiuntivo per te</u>!

</div>
Con la tua preferenza contribuirai a sostenere le imprese ed il tessuto economico locale in un momento così delicato dopo l'emergenza Covid-19.
<p class="big">Te ne saremo grati e ti aspettiamo a Montaione!</p>
<strong>Lo Staff di VisitMontaione</strong>

</div>
</div>
<!-- FINE -->

</div>
</div>

CodePudding user response：

I tried this in css: overflow-y: scroll;