Pop-up

AlexTheKing
Les bases HTML/CSS

Bonjour,

J'ai commencé recemment à créer un pop-up avec un logiciel gratuit du nom de Lunar, j'ai créer mon pop-up est tout fonctionne bien.
Vous voyez, quand vous aller sur un site, en cliquant sur un bouton, un pop-up apparait, sauf que moi, je ne sais pas comment je dois faire cela.

Pour ouvrir mon pop-up je suis obligé de mettre mon lien html qui m'ouvre mon pop-up sur un autre page, ou sur la même page, alors que moi je voudrais qu'il ce lance sur mon index.html et que je puisse voir l'arrière de la page d'accueil.

Voici mon index.html : 

<!DOCTYPE html>
<html>
<head>

    <title>AnimaCraft &#8211; Network C&#039;V.1</title>
    <meta name="description" content="AnimaCraft &#8211; Minecraft Network C&#039;V.1">
    <meta property="og:title" content="Animacraft - Launcher">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/stylesheet.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="logo">

            <img src="img/logo.png" alt="MyServer logo">
        </div>

        <div class="items">
            <!-- Replace # with your forum URL-->
            <a href="#" class="item forums">
            <div>
                <img src="img/dirt.png" alt="Minecraft forums icon" class="img">
                <p class="subtitle">Téléchargez notre</p>
                <p class="title">Launcher</p>

            </div>
            </a>

            <!-- Replace # with your store URL -->
            <a href="https://animacraft.fr/boutique" target="_blank" class="item store">
            <div>
                <img src="img/store.png" alt="Minecraft store icon" class="img">
                <p class="subtitle">Achetez un</p>
                <p class="title">Grade</p>
            </div>
            </a>

            <!-- Replace # with your vote URL -->
            <a href="http://launcher.animacraft.fr/vote.html" class="item forums">
            <div>
                <img src="img/vote.png" alt="Minecraft voting icon" class="img">
                <p class="subtitle">Supportez nous en</p>
                <p class="title">Votant</p>
            </div>
            </a>

    <script src="https://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
    <script src="js/firefly.js" type="text/javascript"></script>
    <script src="js/main.js" type="text/javascript"></script>

</body>
</html>

Et dans mon cas, je voudrais ajouter mon Pop-up lorsque le bouton Supporter nous en votans soit clické, donc à la place du lien.

Voici mon pop-up :

<!doctype html>
<html lang="en">
<head>
    <title>Lunar -  Free Bootstrap Modal and Popups  </title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <!-- Lunar CSS -->
    <link rel="stylesheet" href="assets/css/lunar.css">
    <link rel="stylesheet" href="assets/css/demo.css">
    <!-- Fonts -->
    <link rel="stylesheet" href="assets/css/animate.min.css">
    <link href="https://fonts.googleapis.com/css?family=Work+Sans:600" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Overpass:300,400,600,700,800,900" rel="stylesheet">
    <link rel="icon" type="image/x-icon" href="assets/img/lunar.png"/>
    <link rel="icon" href="assets/img/lunar.png" type="image/png" sizes="16x16">
</head>
<body>

<div class="demo-area">
    <button  type="button"  class="btn btn-dark btn-cta" data-toggle="modal" data-target="#demoModal">
        Open Modal
    </button>
</div>
    <!-- Modal -->
    <div class="modal fade "   id="demoModal"  tabindex="-1" role="dialog"
         aria-labelledby="demoModal" aria-hidden="true">
        <div class="modal-dialog  modal-dialog-centered  " role="document">
            <div class="modal-content">
               <div class="modal-body rounded bg-rhino py-sm-4 px-sm-5">

                   <button type="button" class="close light" data-dismiss="modal"
                           aria-label="Close">
                       <span aria-hidden="true">&times;</span>
                   </button>
                   <div class="text-center text-white pt-5">
                       <img class="mw-100" src="assets/img/cherry-waiting.png" width="200">
                        <h3 class="pt-3">Votez pour AnimaCraft !</h3>
                       <p class="text-white-50">
                        <p>Tu peux voter pour AnimaCraft sur ces sites :</p>
                        <p><a href="https://serveur-prive.net/minecraft/animacraft-launcher-play-animacraft-fr-2617">1. Serveur-Priv&eacute;</a></p>
                        <p><a href="https://www.serveursminecraft.org/serveur/4013/">2. Serveur Minecraft</a></p>
                        <p><a href="https://www.liste-serveurs-minecraft.org/serveur-minecraft/animacraft/">3. Liste Serveur Minecraft</a></p>
                        <p><a href="https://www.serveurs-minecraft.org/vote.php?id=57788">4. Serveur-Minecraft</a></p>
                        <p></p>
                        <p>En votant pour notre serveur, cela nous permet d'avoir plus de visibilit&eacute; ! Et toi, d'avoir plus de cadeaux !</p>
                       </p>
                       <a href="#" class="btn btn-cstm-light btn-cta">get started</a>
                   </div>

                   <div class="pt-3 text-right">
                       <small  class=" text-white-50"><a class="text-white-50" target="_blank" href="https://animacraft.fr">AnimaCraft</a></small>
                   </div>

               </div>

            </div>
        </div>
    </div>
    <!-- Modal Ends -->

<!--end content here-->
<div id="image"></div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/lunar.js"></script>

<script src="assets/js/demo.js"></script>
</body>
</html>

J'espère que vous pourrez m'aider !

Alexandre Tessier

2 réponses

Mickael Christine
Réponse acceptée

Salut Alexandre, met tout simplement ta modal (popup) dans le meme fichier html, plutôt que de l'avoir dans un fichier séparé.
Ensuite dans ton lien tu enleve ton url et t la remplace par un # et tu ajoute les attributs de bootstrap

<a href="#" class="item forums" data-toggle="modal" data-target="#demoModal">
            <div>
                <img src="img/vote.png" alt="Minecraft voting icon" class="img">
                <p class="subtitle">Supportez nous en</p>
                <p class="title">Votant</p>
            </div>
</a>

Ce qui te donne à la fin un fichier html comme ceci

<!DOCTYPE html>
<html>
    <head>
        <title>AnimaCraft &#8211; Network C&#039;V.1</title>
        <meta name="description" content="AnimaCraft &#8211; Minecraft Network C&#039;V.1">
        <meta property="og:title" content="Animacraft - Launcher">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="utf-8">
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" rel="stylesheet">
        <!-- Required meta tags -->
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
        <!-- Lunar CSS -->
        <link rel="stylesheet" href="assets/css/lunar.css">
        <link rel="stylesheet" href="assets/css/demo.css">
        <!-- Fonts -->
        <link rel="stylesheet" href="assets/css/animate.min.css">
        <link href="https://fonts.googleapis.com/css?family=Work+Sans:600" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Overpass:300,400,600,700,800,900" rel="stylesheet">
        <link rel="icon" type="image/x-icon" href="assets/img/lunar.png"/>
        <link rel="icon" href="assets/img/lunar.png" type="image/png" sizes="16x16">
        <link rel="stylesheet" href="css/stylesheet.css">
    </head>
    <body>
        <!-- Modal -->
        <div class="modal fade "   id="demoModal"  tabindex="-1" role="dialog"
             aria-labelledby="demoModal" aria-hidden="true">
            <div class="modal-dialog  modal-dialog-centered  " role="document">
                <div class="modal-content">
                   <div class="modal-body rounded bg-rhino py-sm-4 px-sm-5">
                       <button type="button" class="close light" data-dismiss="modal"
                               aria-label="Close">
                           <span aria-hidden="true">&times;</span>
                       </button>
                       <div class="text-center text-white pt-5">
                           <img class="mw-100" src="assets/img/cherry-waiting.png" width="200">
                            <h3 class="pt-3">Votez pour AnimaCraft !</h3>
                           <p class="text-white-50">
                            <p>Tu peux voter pour AnimaCraft sur ces sites :</p>
                            <p>
                                <a 
                                    href="https://serveur-prive.net/minecraft/animacraft-launcher-play-animacraft-fr-2617"
                                    >
                                    1. Serveur-Priv&eacute;
                                    </a>
                              </p>
                            <p><a href="https://www.serveursminecraft.org/serveur/4013/">2. Serveur Minecraft</a></p>
                            <p><a href="https://www.liste-serveurs-minecraft.org/serveur-minecraft/animacraft/">3. Liste Serveur Minecraft</a></p>
                            <p><a href="https://www.serveurs-minecraft.org/vote.php?id=57788">4. Serveur-Minecraft</a></p>
                            <p></p>
                            <p>En votant pour notre serveur, cela nous permet d'avoir plus de visibilit&eacute; ! Et toi, d'avoir plus de cadeaux !</p>
                           </p>
                           <a href="#" class="btn btn-cstm-light btn-cta">get started</a>
                       </div>

                       <div class="pt-3 text-right">
                           <small  class=" text-white-50">
                                <a class="text-white-50" target="_blank" href="https://animacraft.fr">AnimaCraft</a>
                           </small>
                       </div>
                   </div>
                </div>
            </div>
        </div>
        <!-- Modal Ends -->
    <div class="container">
        <div class="logo">
                <img src="img/logo.png" alt="MyServer logo">
        </div>

        <div class="items">
            <!-- Replace # with your forum URL-->
            <a href="#" class="item forums">
                <div>
                      <img src="img/dirt.png" alt="Minecraft forums icon" class="img">
                      <p class="subtitle">Téléchargez notre</p>
                      <p class="title">Launcher</p>
                </div>
            </a>

            <!-- Replace # with your store URL -->
            <a href="https://animacraft.fr/boutique" target="_blank" class="item store">
                <div>
                      <img src="img/store.png" alt="Minecraft store icon" class="img">
                      <p class="subtitle">Achetez un</p>
                      <p class="title">Grade</p>
                </div>
            </a>

            <!-- Replace # with your vote URL -->
            <a href="#" class="item forums" data-toggle="modal" data-target="#demoModal">
                    <div>
                            <img src="img/vote.png" alt="Minecraft voting icon" class="img">
                            <p class="subtitle">Supportez nous en</p>
                            <p class="title">Votant</p>
                    </div>
            </a>

            <div id="image"></div>

            <script src="assets/js/jquery.min.js"></script>
            <script src="assets/js/popper.min.js"></script>
            <script src="assets/bootstrap/js/bootstrap.min.js"></script>
            <script src="assets/js/lunar.js"></script>
            <script src="assets/js/demo.js"></script>
            <script src="https://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
            <script src="js/firefly.js" type="text/javascript"></script>
            <script src="js/main.js" type="text/javascript"></script>
</body>
</html>
AlexTheKing
Auteur

Merci beaucoup pour votre reponse ! Tous a fonctionner comme prevu pour moi !