Ik wil een popup laten zien wanneer het formulier niet goed is ingevuld. Mijn modal wordt niet getoond wanneer het formulier fout is ingevuld, kan iemand mij helpen? hieronder mijn code

<?php      if ($errors == 0)
        {
            
            echo '<span style="color:green;">Bericht succesvol verzonden.</span>';
            
            // verstuur mailtje via phphmailer...
                                                     
            // Bevestiging naar gebruiker.
                                                 
            
        }
        else
        {
            // loopen door de errors...
               echo "<script> $('#MyModal').modal('show');</script>";                           
        }
      }    
        
      ?>
             <!-- Modal -->
                          
 <div class="modal fade" id="MyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
         <a class="close" data-dismiss="modal">×</a>
            <h3>This is a Modal Heading</h3>
      </div>
      <div class="modal-body">
        <?php 
                                             foreach ($errors as $error) {
                                                   echo '<ul><li><span style="color:red;">'.$error.'</span></li></ul>'; 
                                                 
                                             }?>
      </div>
      <div class="modal-footer">
      <a href="#" class="btn btn-success">Call to action</a>
            <a href="#" class="btn" data-dismiss="modal">Close</a>
      </div>
    </div>
  </div>
</div>


<form name="contact-form" method="post" action="">
                        <div class="form-group">
                           <input type="text" name="naam" value="<?php echo test_input($_POST['naam']);?>" class="form-control" placeholder="Naam">
                        </div>
                        <div class="form-group">
                           <input type="text" name="email" value="<?php echo test_input($_POST['email']);?>" class="form-control" placeholder="Email" >
                        </div>
                        <div class="form-group">
                           <input type="text"  name="onderwerp" value="<?php echo test_input($_POST['onderwerp']);?>" class="form-control" placeholder="Onderwerp">
                        </div>
                        <div class="form-group">
                           <textarea name="bericht"  class="form-control" rows="8" placeholder="Bericht"><?php echo test_input($_POST['bericht']);?></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">Send Message</button>
                     </form>

Een bootstrap modal is standaard onzichtbaar bij het laden van de pagina.

Om deze direct zichtbaar te maken kun je het volgende doen:

a. Voeg de class "in" toe aan de modal:

 <div class="modal in fade" tabindex="-1" role="dialog">


b. de volgende css toevoegen:

.modal.in {
   display:block;
}


Opmerkingen:

- Bootstrap voegt zelf ook de class "in" toe aan de modal wanneer deze zichtbaar is.
- Voeg de css in NA de bootstrap.min.css
Dankjewel, het is inmiddels gelukt :)

Reageren