Multiple modal popups not working

HTML & CSS
1

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

<!-- 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:

#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 :stuck_out_tongue:

Thank again, have all a nice day!

2

Your modal is sitting on to of the middle items although initially it is invisible.

Try lowering the z-index on the initial items and then raising it when shown.

e.g.

div.guidepop.modal.fade{z-index:-1;}
div.guidepop.modal.fade.in{z-index:1050;}

The issue is also there on desktop if the screen height is smaller than your modal. You need to ensure that if the screen height is less than the modal height then you control the height and add overflow to the modal so that it can scroll within itself within the viewport. Fixed elements do not scroll with the viewport and if their bounds are outside the viewport they cannot be reached.

Add this code.

div.guidepop.modal{
max-height:75vh;
overflow:auto;
}
2 Likes
3

Hi Paul, thank you very much for your help!! I don’t know how i missed this lol
Works great, thank again =)

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.