Bonsoir, comme intitulé dans mon titre je cherche le moyen à ouvrir une boite de dialogue confirm fait en bootstrap modal en étant au préalable dans une fenêtre modale. je m'explique j'ai un formulaire que j'ouvre dans une fenêtre modale et en fonction du nombre de caractères saisit par l'utilisateur dans un champ du formulaire j'ouvre une boite de dialogue confirm en modale.
le hic c'est lorsque j'ouvre cette boite de dialogue après le clic sur oui ou non ma première fenêtre modal contenant le formulaire reste grisé et inactive.
code du bonton qui ouvre la fenêtre modale contenant le formulaire:
voici mon code HTML du formulaire:
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8 <button data-toggle="modal" href="form.php" data-target="#infos" class="btn btn-primary"> Ajouter </button> <div class="modal fade" id="infos"> <div class="modal-dialog modal-lg modal-sm modal-md"> <div class="modal-content" id="fen"></div> </div> </div>
le code javascript qui permet d'ouvrir la seconde fenêtre bootstrap:
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30 <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h1>VERIFICATION</h1> </div> <section class="modal-body "> <form class="well form-horizontal" role="form" id="formEnvoi" name="maj" method="POST"> <fieldset> <div class="form-group "> <label class="col-sm-3 control-label" for="codeEnvoi">Code</label> <div class="col-sm-3"> <input type="text" class="form-control" name="codeEnvoi" id="codeEnvoi" AUTOCOMPLETE="OFF" /> </div> </div> <div class="form-group "> <label class="col-sm-3 control-label" for="prodEnvoi">Produit Transfert:</label> <div class="col-sm-3"> <select class="form-control populate placeholder"> <option>Reference 1</option> <option>Reference 2</option> <option>Reference 3</option> </select> </div> </div> <button class="btn btn-primary pull-right" type="submit"> <span class="glyphicon glyphicon-ok-sign"></span> Envoyer </button> </fieldset> </form> </section>
je precise que j'utilise Bootbox.js qui est une petite bibliothèque JavaScript qui vous permet de créer des boîtes de dialogue à l'aide de bootstrap modal dont voici le site http://bootboxjs.com/
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25 bootbox.setDefaults({locale: "fr"}); var codeEnvoi = document.getElementById('codeEnvoi'); var prodEnvoi = document.getElementById('prodEnvoi'); codeEnvoi.onkeyup = function() { if(codeEnvoi.value.length == 8) {prodEnvoi.selectedIndex = 1; prodEnvoi.setAttribute("disabled","disabled"); } if(codeEnvoi.value.length == 9) {prodEnvoi.selectedIndex = 2; prodEnvoi.setAttribute("disabled","disabled"); } if(codeEnvoi.value.length == 10) { if (bootbox.confirm("Ce code est pour reference ?", function(result) {return result;})) prodEnvoi.selectedIndex = 3; else prodEnvoi.selectedIndex = 2; prodEnvoi.setAttribute("disabled","disabled"); } if(codeEnvoi.value.length<8 || codeEnvoi.value.length>10) {prodEnvoi.selectedIndex =0; prodEnvoi.removeAttribute('disabled'); prodEnvoi.setAttribute("readonly","readonly");} };
Partager