Multiple modal popups not working

[a0394]

Hi, i’m having some issues with the creation of multiple “profile cards” that should display a modal popup each. The cards are nestled in divs while ofc the modal contents are at the bottom, free of any container.
The strange thing is that the first and the last work, while the two in the middle don’t (and they also cause some strange scrolling issue on mobile)
Here’s the link, and below you will find the code: https://verticalife.it/it/prova-test-2 1

HTML:

Spoiler

<!-- img-cards -->

<div class="ppl-row row-fluid">

<div class="span3 ppl-img"><a data-toggle="modal" data-target="#modalguide1">

<div class="ppl-bkg"><img src="images/people/guide-istruttori/escursionismo/giorgio-basile-2.jpg" alt="Guida trekking Viaggio in Marocco" /><span>+</span></div><h5>GIORGIO</h5></a></div>

<div class="span3 ppl-img"><a data-toggle="modal" data-target="#modalguide2">

<div class="ppl-bkg"><img src="images/people/guide-istruttori/escursionismo/giorgio-basile-2.jpg" alt="Guida trekking Viaggio in Marocco" /><span>+</span></div><h5>GIORGIO</h5></a></div>

<div class="span3 ppl-img"><a data-toggle="modal" data-target="#modalguide3">

<div class="ppl-bkg"><img src="images/people/guide-istruttori/escursionismo/giorgio-basile-2.jpg" alt="Guida trekking Viaggio in Marocco" /><span>+</span></div><h5>GIORGIO</h5></a></div>

<div class="span3 ppl-img"><a data-toggle="modal" data-target="#modalguide4">

<div class="ppl-bkg"><img src="images/people/guide-istruttori/escursionismo/giorgio-basile-2.jpg" alt="Guida trekking Viaggio in Marocco" /><span>+</span></div><h5>GIORGIO</h5></a></div>

</div>

<!-- Modal GUIDA 1-->

<div id="modalguide1" class="guidepop modal fade" role="dialog">

<div class="modal-dialog modal-dialog-centered">

<!-- Modal content-->

<div class="modal-content">

<div class="modal-body">

<h4>GIORGIO BASILE<br>Guida Escursionistica Verticalife</h4>

<p>Nato a Torino, classe 1984. Dai monti della Val Pellice, ai ghiacciai dell’Himalaya e le torri granitiche della Patagonia, la montagna è stata una compagna di avventure indimenticabili da oramai 25 anni, e continua ad esserlo giorno dopo giorno, offrendo infinite possibilità di viverla, sempre entusiasti quando ci si inoltra in quel mondo magico.<br>

Dal 2018 sono diventato guida escursionistica certificata ed ora posso condividere la mia esperienza con i nostri escursionisti accompagnando il fantastico Gruppo Trekking Torino del Verticalife alla scoperta delle valli alpine e non solo!<br>

Nel resto del tempo lavoro a tempo pieno con il Verticalife per organizzare viaggi e tour in giro per il mondo.</p>

</div><div class="modal-footer">

<button type="button" class="rsform-submit-button btn btn-primary" data-dismiss="modal">Chiudi</button></div></div>

</div></div>

<!-- /Modal -->

<!-- Modal GUIDA 2-->

<div id="modalguide2" class="guidepop modal fade" role="dialog">

<div class="modal-dialog modal-dialog-centered">

<!-- Modal content-->

<div class="modal-content">

<div class="modal-body">

<h4>GIORGIO BASILE<br>Guida Escursionistica Verticalife</h4>

<p>Nato a Torino, classe 1984. Dai monti della Val Pellice, ai ghiacciai dell’Himalaya e le torri granitiche della Patagonia, la montagna è stata una compagna di avventure indimenticabili da oramai 25 anni, e continua ad esserlo giorno dopo giorno, offrendo infinite possibilità di viverla, sempre entusiasti quando ci si inoltra in quel mondo magico.<br>

Dal 2018 sono diventato guida escursionistica certificata ed ora posso condividere la mia esperienza con i nostri escursionisti accompagnando il fantastico Gruppo Trekking Torino del Verticalife alla scoperta delle valli alpine e non solo!<br>

Nel resto del tempo lavoro a tempo pieno con il Verticalife per organizzare viaggi e tour in giro per il mondo.</p>

</div><div class="modal-footer">

<button type="button" class="rsform-submit-button btn btn-primary" data-dismiss="modal">Chiudi</button></div></div>

</div></div>

<!-- /Modal -->

<!-- Modal GUIDA 3-->

<div id="modalguide3" class="guidepop modal fade" role="dialog">

<div class="modal-dialog modal-dialog-centered">

<!-- Modal content-->

<div class="modal-content">

<div class="modal-body">

<h4>GIORGIO BASILE<br>Guida Escursionistica Verticalife</h4>

<p>Nato a Torino, classe 1984. Dai monti della Val Pellice, ai ghiacciai dell’Himalaya e le torri granitiche della Patagonia, la montagna è stata una compagna di avventure indimenticabili da oramai 25 anni, e continua ad esserlo giorno dopo giorno, offrendo infinite possibilità di viverla, sempre entusiasti quando ci si inoltra in quel mondo magico.<br>

Dal 2018 sono diventato guida escursionistica certificata ed ora posso condividere la mia esperienza con i nostri escursionisti accompagnando il fantastico Gruppo Trekking Torino del Verticalife alla scoperta delle valli alpine e non solo!<br>

Nel resto del tempo lavoro a tempo pieno con il Verticalife per organizzare viaggi e tour in giro per il mondo.</p>

</div><div class="modal-footer">

<button type="button" class="rsform-submit-button btn btn-primary" data-dismiss="modal">Chiudi</button></div></div>

</div></div>

<!-- /Modal -->

<!-- Modal GUIDA 4-->

<div id="modalguide4" class="guidepop modal fade" role="dialog">

<div class="modal-dialog modal-dialog-centered">

<!-- Modal content-->

<div class="modal-content">

<div class="modal-body">

<h4>GIORGIO BASILE<br>Guida Escursionistica Verticalife</h4>

<p>Nato a Torino, classe 1984. Dai monti della Val Pellice, ai ghiacciai dell’Himalaya e le torri granitiche della Patagonia, la montagna è stata una compagna di avventure indimenticabili da oramai 25 anni, e continua ad esserlo giorno dopo giorno, offrendo infinite possibilità di viverla, sempre entusiasti quando ci si inoltra in quel mondo magico.<br>

Dal 2018 sono diventato guida escursionistica certificata ed ora posso condividere la mia esperienza con i nostri escursionisti accompagnando il fantastico Gruppo Trekking Torino del Verticalife alla scoperta delle valli alpine e non solo!<br>

Nel resto del tempo lavoro a tempo pieno con il Verticalife per organizzare viaggi e tour in giro per il mondo.</p>

</div><div class="modal-footer">

<button type="button" class="rsform-submit-button btn btn-primary" data-dismiss="modal">Chiudi</button></div></div>

</div></div>

<!-- /Modal -->

And here’s the CSS:

Spoiler

#modalguide1, #modalguide2, #modalguide3, #modalguide4 {top:20%!important;}

.ppl-row a, .ppl-row a:hover {color: #413e4a;text-decoration: none;}
.ppl-row h5 {text-align:center;cursor: pointer;font-size: 1rem;font-weight: 800;text-rendering: geometricprecision}
.ppl-img {position: relative;cursor: pointer}

.ppl-img:hover span {opacity: 1;}

.ppl-img img {transition: .5s ease;}
.ppl-img:hover img {opacity: 0.7;}

.ppl-bkg {background-color: #000000;position: relative;}
.ppl-bkg span {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) !important;color:#ffffff;opacity: 0;font-size: 3rem; transition: .5s ease;color: #E18225;}

.guidepop .modal-dialog {background: repeating-linear-gradient(135deg, #f1f8f8, #f1f8f8 8px, rgba(228,237,243,0.99) 3.9px, rgba(228,237,243,0.99) 12px);padding: 1rem;}

.guidepop .modal-footer {background-color: transparent;margin: 0;padding: 0;text-align: center;border-radius: 0;box-shadow: none;border-top: none;}

.modal-dialog h4 {text-align:center;}

Do you know how to fix this? I’m getting mad

Thank again, have all a nice day!

 

[tony_maguire]

Try this:

Example:
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
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.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}

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

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

Regards,
Tony