Boostrap modal dans un caroussel

Marine Mlg
Les bases HTML/CSS

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Décrivez ici votre code ou ce que vous cherchez à faire
J'ai créé un tutoriel avec caroussel Bootstrap : dans ma colonne de gauche du texte et dans la colonne de droite des images. J'insère dans cette colonne une icône pour agrandir l'image. Selon où je place le code suivant ça fonctionne ou pas...


                                    <a data-target="#modal1" data-toggle="modal"><img src="images/zoom.png"></a>                
                                    <div class="modal fade" id="modal1">
                                        <div class="modal-dialog modal-md">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button class="close" data-dismiss="modal">&times;</button>
                                                </div>
                                                <div class="modal-body">
                                                    Body
                                                </div>
                                            </div>
                                        </div>
                                    </div>

### Ce que je veux
Je veux qu'en cliquant sur l'icone, un modal s'affiche avec mon image (j'ai mis Body pour le moment).

### Ce que j'obtiens

Quand je place ce code en dehors du caroussel, tout en haut de ma page par ex, il fonctionne. Qiand je le mets dans une colonne dans mon slide de caroussel, la page se fonce bien mais le modal ne s'afiche pas.
Voyez vous pourquoi ?
Merc de votre aide !
Bonne soirée

2 réponses

Ekim Kael
Réponse acceptée

donc en gros tu voudrais que lorsque quelqu'un clique sur une image dans le caroussel que le Modal se lance et affiche l'image en question.
si c'est ça ton problème alors essaie ça

<!DOCTYPE html>
<html lang="fr">
   <head>
      <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap 101 Template</title>

        <!-- Bootstrap -->
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">

    </head>
    <body>
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"> </li>
                <li data-target="#carousel-example-generic" data-slide-to="1"> </li>
                <li data-target="#carousel-example-generic" data-slide-to="2"> </li>
            </ol>
            <div class="carousel-inner">
                <div class="item active">
                    <a data-target="#modal1" data-toggle="modal"><img src="http://placehold.it/3050x1050" alt="First slide"/></a>
                </div>
                <div class="item">
                    <a data-target="#modal1" data-toggle="modal">
                        <img src="http://placehold.it/3500x1500" alt="Second slide"/>
                    </a>
                </div>
                <div class="item">
                    <a data-target="#modal1" data-toggle="modal">
                        <img src="http://placehold.it/3050x1050" alt="Third slide"/>
                    </a>
                </div>
            </div>
            <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
            <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
        </div>
        <br>

        <div class="modal fade" id="modal1">
            <div class="modal-dialog modal-md">
                <div class="modal-content">
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <img src="http://placehold.it/100x50">
                    </div>
                </div>
            </div>
        </div>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    </body>
</html>
Marine Mlg
Auteur

Merci Mich'Kael, il suffisait de sortir le code du modal du Carousel, top !
Bonne journée :-)