Bonjour,

J'ai utilisé le code de ce site pour faire un modal box d'inscription : http://demos.codingcage.com/bs-form-validation/

Voilà ma page avec la box apparente : https://www.webargent.fr/signup.php

Tout fonctionne parfaitement et j'ai pu personnaliser certains éléments grace aux explications du site.

Le problème que j'ai maintenant, c'est que je souhaiterai mettre un lien dans mon header (<a href"page-en-cours.php">Inscription</a>) qui permettrai d'afficher cette fameuse modal box. Mais mon code ne fonctionne pas. D'où vient mon erreur ? Merci

J'ai pensé faire :

<script>
$(document).ready(function(){
  $('div#container').dialog({ autoOpen: false })
  $('#lienmodal').click(function(){ $('div#container').dialog('open'); });
});
</script>

<a href="#" id="lienmodal">Ouvrir</a>

Le code du formulaire :

//Formulaire de signup
$form = '<div class="container" id="container">
    <div class="signup-form-container">
         <form method="post" role="form" id="register-form" autocomplete="off" action="'.ltrim($_SERVER['REQUEST_URI'], '/').'">
         
         <div class="form-header">
         	<h3 class="form-title"><i class="fa fa-user"></i> Formulaire d\'inscription</h3>
         	<div class="pull-right">
            	 <h3 class="form-title"><span class="glyphicon glyphicon-pencil"></span></h3>
         	</div>             
         </div>
                  
         <div class="form-body">
                      
         	  <div class="form-group">
                   <div class="input-group">
                   <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
                   <input name="name" type="text" class="form-control" placeholder="Pseudo">
                   </div>
                   <span class="help-block" id="error"></span>
              </div>
                        
              <div class="form-group">
                   <div class="input-group">
                   <div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>
                   <input name="email" type="text" class="form-control" placeholder="Email">
                   </div> 
                   <span class="help-block" id="error"></span>                     
              </div>
                       
              <div class="row">                 
                   <div class="form-group col-lg-6">
                        <div class="input-group">
                          <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
                          <input name="password" id="password" type="password" class="form-control" placeholder="Mot de passe">
                        </div>  
                        <span class="help-block" id="error"></span>                    
                   </div>
                            
                   <div class="form-group col-lg-6">
                        <div class="input-group">
                          <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
                          <input name="cpassword" type="password" class="form-control" placeholder="Confirmation">
                        </div>  
                        <span class="help-block" id="error"></span>                    
                   </div>                
             </div>
                           
          </div> 
            
            <div class="form-footer">
                 <button type="submit" class="btn btn-info">
                 <span class="glyphicon glyphicon-log-in"></span> Rejoindre la communauté</button>
            </div>
        </form>
      </div> 
	</div>'; //Container

-
Edité par Natsu57 19 janvier 2017 à 17:36:53

Salut,

Vu que tu utilises Bootstrap (enfin je suppose que tu utilises bootstrap vu le nom de tes classes), je pense que les Modals pourraient être une solution pour ce que tu veux obtenir.
Une petite démo ici : http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h

Si ce n'est pas le cas il va falloir s'amuser un peu en Javascript

Au passage attention à ton code HTML, tu multiplies les id qui sont censés être unique dans ton document, sur le coup ca fonctionne mais la pratique est pas validé au W3C.

Oui voilà c'est ce que je souhaite faire

J'en profiterai pour faire un nettoyage du code. Merci