web-dev-qa-db-fra.com

formulaire popup utilisant html/javascript/css

Je dois ouvrir un formulaire html dans un popup. Popup ne devrait pas être une fenêtre (qui est généralement créée en utilisant window.open ()), mais plutôt une fenêtre apparaissant dans le lien ci-dessous (ouvrir dans firefox) http: //www.w3schools. com/js/tryit.asp? filename = tryjs_Prompt Mais le problème avec ce code est que je ne peux pas changer le contenu du contenu contextuel de "Entrez votre nom" à mon formulaire HTML. En cherchant, j’ai trouvé qu’il ne PEUT PAS changer le contenu de la boîte de message instantané et que la seule solution est de créer votre propre menu contextuel ... N’y at-il pas une solution plus simple?

Je vous remercie....

javascripthtmlcsshtml5css3
5
Neetu Pant

S'il vous plaît essayez jQuery UI dialogue

Voici la démo formes

Pour une utilisation mobile, consultez jQuery Mobile - Création de boîtes de dialogue

19
mplungjan

Démo en direct

On dirait que vous voulez peut-être une boîte à lumière, et puisque vous n'avez pas balisé votre question avec jQuery inclus, voici un exemple pur en JS montrant comment en créer 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;
}

Balisage 

<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;
}
17
Loktar

Mais le problème avec ce code est que, je ne peux pas changer le contenu contextuel du contenu de "Entrez votre nom" à mon formulaire HTML. 

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

En cherchant, j’ai trouvé qu’il ne pouvait PAS changer le contenu de la boîte de dialogue contextuelle.

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

1
Quentin

Remplacer simplement "Veuillez entrer votre nom" dans le contenu souhaité ferait l'affaire. Est-ce que je manque quelque chose?

0
sunil_mlec

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 un popUp par HTML et CSS
  3. Ecrire CSS 
  4. Appelez JavaScript mehod

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

0
Rahul Jain

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

Ajouter un bouton ou un lien vers votre page comme ceci

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

"#Inline" devrait ici ê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.

0
Raj Sharma