J'ai besoin d'aide pour un petit bug s'il vous plaît ^^'
Je m'explique. Je code un site, et à un moment, j'ai un carousel bootstrap qui marche très bien et dans les diapositives du carousel j'ai mis des liens qui pointent chacun vers son modal respectif. Or il n'y a que le premier modal qui s'ouvre bien, l'autre m'affiche un fond gris et je ne peux plus cliquer sur rien ni défiler et il faut alors actualiser pour accéder à la page. Savez-vous pourquoi ?
Merci d'avance pour votre aide !
Le code :
<section class="color"><!-- Carousel -->
<div id="presentation" class="carousel slide" data-interval="4500" >
<div class="carousel-inner">
<div class="carousel-item active">
<div class="container">
<article>
<h2><a data-toggle="modal" href="" data-target="#apprentiConducteur"> Apprenti conducteur </a></h2>
<p> Gagnez en assurance et en expérience,
perfectionnez-vous et augmentez vos chances de réussite à l'examen.
</p>
</article>
</div>
</div>
<div class="carousel-item">
<div class="slide" id="candidatLibre">
<div class="container">
<article>
<h2><a data-toggle="modal" href="" data-target="#candidatLibre"> Candidat libre </a></h2>
<p> Faites des économies et passez le permis en candidat libre à la condition d'avoir déjà
été inscrit dans une auto-école ou de vous inscrire sur le site ANTS.
</p>
</article>
</div>
</div>
</div>
<div class="carousel-item">
<div class="slide" id="remiseANiveau">
<div class="container">
<article>
<h2> Remise à niveau </h2>
<p> Reprenez le volant en toute sécurité, grâce à la pratique.
</p>
</article>
</div>
</div>
</div>
<div class="carousel-item">
<div class="slide" id="vtcTaxi">
<div class="container">
<article>
<h2> Examen VTC/Taxi </h2>
<p> Vous avez réussi l’examen théorique VTC/ Taxi et vous devez désormais passer l’épreuve
pratique. Félicitations ! Sachez que vous devez vous présenter à l’examen à bord d’un
véhicule possédant un dispositif de double-commande.
</p>
</article>
</div>
</div>
</div>
<div class="carousel-item">
<div class="slide" id="enseignant">
<div class="container">
<article>
<h2> Futur enseignant de la conduite et de la sécurité routière (ECSR) </h2>
<p>Perfectionnez-vous dans l'accomagnement de vos élève et préparez-vous à votre formation d'ECSR.
</p>
</article>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#presentation" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#presentation" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section><!-- /Carousel -->
<div class="modal fade" id="apprentiConducteur" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="text-center">
<br>
<h4>Conditions à remplir</h4>
</div>
<div class="modal-body">
<div class="te">
<ul class="features-border list-unstyled">
<li>
<p>Avoir au moins 16 ans</p>
<p>Être titulaire d'un formulaire de demande de permis de conduire (cerfa 14866*01) ou d'une attestation d'inscription au permis de conduire dématérialisée</p>
<p>Être détenteur d'un livret d'apprentissage avec un minimum de 20h (le livret d'apprentissage peut prendre une forme dématérialisée)</p>
<p>Avoir obtenu l’examen théorique général (code)</p>
<p>Fournir une pièce d'identité</p><p></p>
</li>
<li>
Lors de l'apprentissage, vous devez toujours avoir dans le véhicule le livret et le formulaire de demande pour pouvoir les présenter en cas de contrôle routier.
</li>
</ul>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="candidatLibre" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="text-center">
<br>
<h4>Conditions à remplir</h4>
</div>
<div class="modal-body">
<div class="te">
<ul class="features-border list-unstyled">
<li>
<p>Avoir au moins 18 ans</p>
<p>Être titulaire d'un formulaire de demande de permis de conduire (cerfa 14866*01) ou d'une attestation d'inscription au permis de conduire dématérialisée</p>
<p>Être détenteur d'un livret d'apprentissage, qui peut être dématérialisé</p>
<p>Avoir obtenu l’examen théorique général (code)</p>
<p>Fournir une pièce d’identité et un justificatif de domicile de moins de 3 mois</p><p></p>
</li>
<li>
Depuis le 1er Janvier 2017, les préfectures ont l'obligation d'accorder une place à l'examen du permis de conduire aux candidats libre sous deux mois maximum.
</li>
</ul>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
</div>
</div>
</div>
</div>
Ahh c'est bon !
Deux div portaient le même id du coup c'est normal qu'il ne sachent pas quoi afficher !
My bad !
Sujet Résolu !
- Edité par Shivatack 11 août 2018 à 19:48:37
Mettre des modal dans un carousel Bootstrap
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.