Formulaire contextuel utilisant html / javascript / css

Essayez la boîte de dialogue jQuery UI

Voici la démo des formulaires

Pour une utilisation mobile, regardez jQuery Mobile – Création de dialogues

Demo en direct

On dirait que vous voudrez peut-être une boîte lumineuse, et comme vous n'avez pas marqué votre question avec jQuery inclus, il s'agit d'un exemple JS pur de la façon de faire une.

JS

var opener = document.getElementById("opener"); opener.onclick = function(){ var lightbox = document.getElementById("lightbox"), dimmer = document.createElement("div"); dimmer.style.width = window.innerWidth + 'px'; dimmer.style.height = window.innerHeight + 'px'; dimmer.className = 'dimmer'; dimmer.onclick = function(){ document.body.removeChild(this); lightbox.style.visibility = 'hidden'; } document.body.appendChild(dimmer); lightbox.style.visibility = 'visible'; lightbox.style.top = window.innerHeight/2 - 50 + 'px'; lightbox.style.left = window.innerWidth/2 - 100 + 'px'; return false; } 

Marquage

 <div id="lightbox">Testing out the lightbox</div> <a href="#" id="opener">Click me</a> 

CSS

 #lightbox{ visibility:hidden; position:absolute; background:red; border:2px solid #3c3c3c; color:white; z-index:100; width: 200px; height:100px; padding:20px; } .dimmer{ background: #000; position: absolute; opacity: .5; top: 0; z-index:99; } 

Mais le problème avec ce code est que je ne peux pas modifier le contenu contextuel du contenu de "Entrez votre nom" dans mon formulaire html.

Umm. Il suffit de changer la chaîne passée à la fonction prompt() .

Lors de la recherche, j'ai constaté que nous ne pouvons PAS modifier le contenu de la fenêtre contextuelle

Vous ne pouvez pas modifier le titre . Vous pouvez modifier le contenu, c'est le premier argument passé à la fonction prompt() .

Il suffit de remplacer "Veuillez saisir votre nom" à votre contenu souhaité pour faire le travail. Est-ce que je manque quelque chose?

Regardez l'exemple le plus simple pour créer un popup en utilisant css et javascript.

1. Créer un lien HREF en utilisant HTML.
2. Créer une popup par HTML et CSS
3. Ecrire CSS
4. Appelez JavaScript mehod

Voir l'exemple complet sur ce lien http://makecodeeasy.blogspot.en/2012/07/popup-in-java-script-and-css.html

Voici une ressource que vous pouvez éditer et utiliser Télécharger le code source ou voir la démo en direct ici http://purpledesign.in/blog/pop-out-a-form-using-jquery-and-javascript/

Ajoutez un bouton ou un lien à votre page comme celle-ci

 <p><a href="#inline">click to open</a></p> 

"#inline" ici devrait être le "id" de celui qui contiendra le formulaire.

 <div id="inline"> <h2>Send us a Message</h2> <form id="contact" name="contact" action="#" method="post"> <label for="email">Your E-mail</label> <input type="email" id="email" name="email" class="txt"> <br> <label for="msg">Enter a Message</label> <textarea id="msg" name="msg" class="txtarea"></textarea> <button id="send">Send E-mail</button> </form> </div> 

Incluez ces scripts pour écouter l'événement de clic. Si vous avez une action définie dans votre formulaire, vous pouvez utiliser la méthode "preventDefault ()"

 <script type="text/javascript"> $(document).ready(function() { $(".modalbox").fancybox(); $("#contact").submit(function() { return false; }); $("#send").on("click", function(){ var emailval = $("#email").val(); var msgval = $("#msg").val(); var msglen = msgval.length; var mailvalid = validateEmail(emailval); if(mailvalid == false) { $("#email").addClass("error"); } else if(mailvalid == true){ $("#email").removeClass("error"); } if(msglen < 4) { $("#msg").addClass("error"); } else if(msglen >= 4){ $("#msg").removeClass("error"); } if(mailvalid == true && msglen >= 4) { // if both validate we attempt to send the e-mail // first we hide the submit btn so the user doesnt click twice $("#send").replaceWith("<em>sending...</em>"); //This will post it to the php page $.ajax({ type: 'POST', url: 'sendmessage.php', data: $("#contact").serialize(), success: function(data) { if(data == "true") { $("#contact").fadeOut("fast", function(){ //Display a message on successful posting for 1 sec $(this).before("<p><strong>Success! Your feedback has been sent, thanks :)</strong></p>"); setTimeout("$.fancybox.close()", 1000); }); } } }); } }); }); </script> 

Vous pouvez ajouter tout ce que vous voulez faire dans votre fichier PHP.

Il y a plein d'équipements disponibles. Essayez d'utiliser les fenêtres Modal de Jquery ou DHTML feraient bien. Mettez le contenu dans votre div ou Changez votre contenu en div de manière dynamique et affichez-le à l'utilisateur. Ce ne sera pas une fenêtre contextuelle mais une fenêtre modale.
Jquery's Thickbox éliminerait votre problème.