JS

Modal ne s'affiche pas

Résolu

Bonjour mes chers codeurs,


Je travaille sur un modal avec une formulaire de contact à remplir (Nom, prénom, numéro téléphone, adresse et message) tout marche très bien avec PHP. Dans mon cas actuel si j'envoi le message le modal disparait.

A mon niveau j'aimerais voir en automatique le modal réapparaitre pour que je puisse savoir si le mail est envoyé.

Voir ci dessous le code.


Merci


<!-- Modal -->
           <center>
               <button style="background: #00ff2b; padding-top: 15px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; text-align: center; cursor:pointer; color: #000; font-weight:bold" onclick="document.getElementById('modal1').style.display='block'" style="width: auto; border-radius: 45px"><h4>Commander Maintenant</h4></button>
           </center>


    <div class="modal" id="modal1">


    <form class="modal-content animate" action="#" method="POST" action="<?php $_SERVER['PHP_SELF'];?>">


        <div class="img">
            <span onclick="document.getElementById('modal1').style.display='none'"  class="close" title="close Button">&times;</span>
            <img src="img.jpg" alt="Avatar" class="avatar" style="position:relative; left: 40%">
        </div>
            <h3 style="position:relative; text-align:center">Je suis interessé(e)  </h3>
        <div class="containerr"> <div class="row">
                                    <div class="col-lg-12 col-sm-12">
                                        <div class="form-group">
                                            <input type="text" name="firstname" id="firstname" class="form-control"  placeholder="Votre NOM" value="<?php echo $firstname; ?>" />
                                           <p class="comments"><?php echo $firstnameError ?></p>
                                        </div>
                                    </div>


                                    <div class="col-lg-12 col-sm-12">
                                        <div class="form-group">
                                            <input type="text" name="name" id="name" class="form-control"  placeholder="Votre Adresse"  value="<?php echo $name;?>"/>
                                           <p class="comments"><?php echo $nameError ?></p>
                                        </div>
                                    </div>


                                    <div class="col-lg-12 col-sm-12">
                                        <div class="form-group"> 
                                            <input type="email" name="email" id="email" class="form-control"   value="<?php echo $email;?>" placeholder="Votre EMAIL" />
                                  <p class="comments"><?php echo $emailError ?></p>
                                        </div>
                                    </div>


                                    <div class="col-lg-12 col-sm-12">
                                        <div class="form-group">
                                            <input type="text" name="phone" id="phone"  class="form-control" placeholder="VOTRE Numero" value="<?php echo $phone;?>"/>
                                             <p class="comments"><?php echo $messageError ?></p>
                                        </div>
                                    </div>


                                    <div class="col-lg-12 col-md-12">
                                        <div class="form-group">
                                            <textarea name="message" class="form-control" id="message" cols="30" rows="5" required data-error="Ecrit votre message" ><?php echo $message; /*Pour faire reaparaitre les donnés de l'utilisateur apres envoie*/?>Je suis interessé</textarea>
                                  <p class="comments"><?php echo $messageError ?></p>
                                        </div>
                                    </div>


                                    <div class="col-lg-12 col-md-12">
                                        <button type="submit" class="default-btn page-btn box-btn">
                                                       ENVOYER 
                                            </button>
                                        <div id="msgSubmit" class="h3 text-center hidden"></div>
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                   
            
             <div class="containerr">
                <button onclick="document.getElementById('modal1').style.display='none'"  type="button" class="cancel">Annuler</button> 
           </div>
         </div>
          <p class="thank-you" style="display:<?php if($isSuccess) echo 'block'; else echo 'none';?>">Votre souscription a bien été envoyé. Merci de m'avoir contacté : </p>
    </form>
  </div>
751 vues
16 décembre 2020 à 2:53 (Édité)
Cette pub permet au site de vivre ...

2 commentaires

Hello @Jerem971


Je viens d'apprendre pleins de choses actuellement entre "modal" et "pop-up".

La documentation c'est exactement ça que je recherchais. Sujet résolu.


Merci infiniment.

Hello @Aiman,


Attention à ne pas confondre "pop-up" et "modal" ! 🧐

Les fenêtres modales sont des fenêtres qui apparaissent directement à l’intérieur de la fenêtre courante du navigateur, au-dessus de la page web qui les appelle.

Il s’agit de fenêtres modales, c’est-à-dire de fenêtres qui prennent le contrôle de la page courante tant qu’elles sont affichées à l’écran.

Une pop-up est une autre fenêtre du navigateur qui s'affiche sur ton système d'exploitation et non directement sur la page web

Si certains sites utilisent le terme "pop-up", c'est tout simplement le mauvais terme, le bon terme est "modal" pour le développement web.


Pour ton problème, je pense que cet article pourrait t'aider 😉

Cette pub permet au site de vivre ...