Discussion :

[NewUserDelphi]

Bonjour
Je souhaite afficher une div modal, pour cela je procède ainsi :

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
31
32
<div id="modal-parent">
        <div id="modal_ok_lost">
            <div class="modal-child modal-ok">
                <div class="">
                    <div bp="flex margin-bottom--lg">
                        <div bp="fill" class="modal-txt">
                            <span class="icon-info middle padding-right"></span>Succes !
                        </div>
                        <div bp="fit">
                            <span class="icon-cross pointer" onclick="CloseModal('ok_lost');"></span>
                        </div>
                    </div>
                    <p>Si l'adresse email saisie est ratachée à un compte, un email contenant un lien de reinitialisation de votre mot de passe y a été envoyé.</p>
                </div>
            </div>
        </div>
        <div id="modal_error_saisie">
            <div class="modal-child modal-error">
                <div class="">
                    <div bp="flex margin-bottom--lg">
                        <div bp="fill" class="modal-txt">
                            <span class="icon-warning middle padding-right"></span>Erreur !
                        </div>
                        <div bp="fit">
                            <span class="icon-cross pointer" onclick="CloseModal('error_saisie');"></span>
                        </div>
                    </div>
                    <p>Merci de verifier votre saisie.</p>
                </div>
            </div>
        </div>
    </div>

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
function OpenModal(Name) {
    $("#modal-parent").show();
    $("#modal_" + Name).show();
}
 
function CloseModal(Name) {
    $("#modal-parent").hide();
    $("#modal" + Name).hide();
}
 
$("#bt-email-lost").click(function(e) {
    e.stopPropagation();
    e.preventDefault();
    var email = $.trim($("#email-lost").val());
    if (email == "") {
        OpenModal('error_saisie');
    }
    if (IsEmail(email) == true) {
        // AJAX 
        /*$("#box-input").hide();*/
        OpenModal('ok_lost');
    } else {
        OpenModal('error_saisie');
    }
});

Mon problème est le suivant : C'est toujours la première div codée dans le html qui s affiche.
Mes tests sont corrects (fonction IsEmail, longueur non nul... Tout est bon sauf que c est toujours la première div qui s affiche...

J ai besoin de vos lumières car j ai beau tourner le problème dans tous les sens, je ne trouve pas la solution.

Merci pour votre aide

[Toufik83]

Salut,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#bt-email-lost").click(...)

il est ou ce bouton ayant l'id "bt-email-lost" ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var email = $.trim($("#email-lost").val());

id="email-lost" n'existe pas dans ton code html aussi...

[NewUserDelphi]

Merci d avoir pris le temps de me répondre.

Le bouton en question est plus haut dans la page, dans un formulaire je ne l ai pas mis car il ne pose aucun problème, le traitement s effectue bien au click sur le bouton seul mon résultat n'est pas correct mais le traitement est opérant (test email, test pas vide...) c est simplement un pb d affichage donc je pense que ce n est pas utile. Je me trompe ?

[Toufik83]

Ton code n'est pas optimisé correctement, parce qu'il faut grouper tout les blocs d'erreurs dans une seule condition, et d'ajouter un style="display: none" aux modals et pas au div parent #modal-parent :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<div id="modal-parent" >
      <div id="modal_ok_lost" style="display:none">....</div>
      <div id="modal_error_saisie" style="display:none">....</div>
</div>

Après essaies ce code :

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
 
function OpenModal(Name) {
	$('#modal_ok_lost,#modal_error_saisie').hide();
	$("#modal_" + Name).show();
}
 
function CloseModal(Name) {
	$("#modal_" + Name).hide();
}
 
$("#bt-email-lost").click(function(e) {
	e.stopPropagation();
	e.preventDefault();
	var email = $.trim($("#email-lost").val());
	if (email == "" && !IsEmail(email)) {
		OpenModal('error_saisie');
	}else {
		OpenModal('ok_lost');
	}
});