Ouvrir une fenetre modale à partir d'une autre
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:
Code:
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> |
voici mon code HTML du formulaire:
Code:
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> |
le code javascript qui permet d'ouvrir la seconde fenêtre bootstrap:
Code:
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");}
}; |
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/
