Discussion :

[glaudioman]

Bonjour,

Je fais mon site et je souhaite un formulaire de contact en fenêtre modale.

J'ai pu faire le design par cet excellent article : http://dmouronval.developpez.com/tut...e-modale-css3/ mais je n'arrive pas à l'envoyer autrement qu'en ouvrant une nouvelle pasge, et le rendu est pas très heureux.

Je voudrais, à la validation de mon formulaire, exécuter mon script php et fermer la fenêtre modale (sans recharger ma page, puisque je peux avoir des filtres de recherche actif . Je suis en galère depuis hier... Help ! L'envoi de mail fonctionne bien, il est actuellement dans un fichier php. J'ai cru comprendre que je pouvais le mettre dans ma page, mais comment ?

Mon code actuel :

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
<label class="button" for="modalCheck"><img src="image/mail.png"  width="32" height = "32" alt = "e-mail"></label>
<input type="checkbox" id="modalCheck" />
<div class="modalLayer">
<div class="popup_block">
<label for="modalCheck"><img alt="Fermer" title="Fermer la fen&ecirc;tre" class="btn_close" src="image/close_pop.png"></label>
<center>
<font size = 6 color = #D41149 >Posez nous votre question sur le titre : '.  $data['TITRE'] . '</font><br><br>
<div style="padding:5px; background-color:#D41149;  border:2px solid #F9E086; -moz-border-radius:9px; -khtml-border-radius:9px; -webkit-border-radius:9px; border-radius:9px;  width: 410px;">
<center>
<form method="POST" target="my_iframe" action="envoimail-prod.php" ><br><br>
<input type="hidden" name = "objet" value="Information sur le titre : '.  $data['TITRE'] .'">
<label for="nom">Nom :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><textarea id="nom" class="input" name="nom" rows="1" cols="30"></textarea><br><br>
<label for="nom">E-Mail :&nbsp;&nbsp;</label><textarea id="email" class="input" name="email" rows="1" cols="30"></textarea><br><br>
<label for="email">Message :</label><br/><textarea id="message" class="input" name="message" rows="10" cols="40"></textarea><br/><br>
<label><INPUT TYPE="submit" class="btn_close" VALUE="Envoyer" ></label><br><br>
</center></font>
</form>
</div>
</center>
</div>
</div>

Merci d'avance !

[glaudioman]

Je viens de trouver comment envoyer le mail, il ne me reste qu'à fermer la fenêtre modale à la validation.

Pour info, j'ai ajouté en script dans la balise head :

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
  <script>
  $(document).ready(function(){
$('#myForm').on('submit',function(e) {
 
	$.ajax({
		url:'envoimail-prod.php',
		data:$(this).serialize(),
		type:'POST',
		success:function(data){
			console.log(data);
		$("#success").show().fadeOut(5000);
		},
		error:function(data){
			$("#error").show().fadeOut(5000);
		}
		});
e.preventDefault();
});
});
  </script>

et ma form a été déclaré de cette façon :

Code :

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

 <form class="form2" action="" method="POST" name="myForm" id="myForm">

avec en propriété pour la class form2 :
overflow: hidden;

[glaudioman]

Par contre, je galère toujours pour fermer la fenêtre modale à la validation du formulaire. Là, on a l'impression qu'il ne se passe rien.

Si quelqu'un a une idée, je suis preneur !

Merci !

[glaudioman]

trouvé !

Dans ma déclaration de form :

Code :

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

 <form class="form2" action="" method="POST" name="myForm" id="myForm" onsubmit="window.location.assign(\'#close\')">

Et ça passe nickel !