What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

Multiple modal popups not working

a0394

New member
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:


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

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!
 
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
 
Back
Top