Wie mache ich ein einfaches modales Popup-Formular mit jquery und html?

Ich habe bereits die Tutorials zu jQuery gelesen, aber es fällt mir schwer zu verstehen, dass es jemanden gibt, der mich einfacher unterrichten kann, bitte möchte ich, dass wenn ich einen meiner Buttons drücke wird sein Wert in #valueFromMyButton angezeigt und wenn der modale Pop aus ich einen Text eingeben kann, und nachdem ich auf oK den Text, den ich tippe auf #valueFromMyModal platziertWie mache ich ein einfaches modales Popup-Formular mit jquery und html?

<!DOCTYPE HTML> 
    <html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
    </head> 
    <body> 
     <input id="btn1" type="button" value="1"> 
     <input id="btn2" type="button" value="2"> 
     <input id="btn3"type="button" value="3"> 

     <input id="valueFromMyModal" type="text"> 

     <!--How to make this pop up modal form--> 
     <div id="myform"> 
      <form> 
<label id="valueFromMyButton"></label> 
      <input id="name" type="text"> 
      <input id="btnOK" type="button" value="Ok"> 
      </form> 
     </div> 
</body> 
</html>

Quelle

2012-09-14 Brained Washed

für eine bessere Lösung, ich glaube, Sie – HungryCoder

jQuery UI-Dialog-Widgets verwenden können, so schwer alle tuts zu verstehen, die viel einfacher ist –

Sie dies überprüfen heraus. http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/ – HungryCoder

ich gesetzt habe hier komplette Bins für obige Abfrage. Sie können den Demo-Link auch überprüfen.

Demo:http://codebins.com/bin/4ldqp78/2/How%20to%20make%20a%20simple%20modal%20pop

HTML

<div id="panel"> 
    <input type="button" class="button" value="1" id="btn1"> 
    <input type="button" class="button" value="2" id="btn2"> 
    <input type="button" class="button" value="3" id="btn3"> 
    <br> 
    <input type="text" id="valueFromMyModal"> 
    <!-- Dialog Box--> 
    <div class="dialog" id="myform"> 
    <form> 
     <label id="valueFromMyButton"> 
     </label> 
     <input type="text" id="name"> 
     <div align="center"> 
     <input type="button" value="Ok" id="btnOK"> 
     </div> 
    </form> 
    </div> 
</div>

JQuery

$(function() { 
    $(".button").click(function() { 
     $("#myform #valueFromMyButton").text($(this).val().trim()); 
     $("#myform input[type=text]").val(''); 
     $("#myform").show(500); 
    }); 
    $("#btnOK").click(function() { 
     $("#valueFromMyModal").val($("#myform input[type=text]").val().trim()); 
     $("#myform").hide(400); 
    }); 
});

CSS

.button{ 
    border:1px solid #333; 
    background:#6479fd; 
} 
.button:hover{ 
    background:#a4a9fd; 
} 
.dialog{ 
    border:5px solid #666; 
    padding:10px; 
    background:#3A3A3A; 
    position:absolute; 
    display:none; 
} 
.dialog label{ 
    display:inline-block; 
    color:#cecece; 
} 
input[type=text]{ 
    border:1px solid #333; 
    display:inline-block; 
    margin:5px; 
} 
#btnOK{ 
    border:1px solid #000; 
    background:#ff9999; 
    margin:5px; 
} 

#btnOK:hover{ 
    border:1px solid #000; 
    background:#ffacac; 
}

Demo:http://codebins.com/bin/4ldqp78/2/How%20to%20make%20a%20simple%20modal%20pop

Quelle

2012-09-14 10:24:33 gaurang171

Vielen Dank .. :) –

wenn ich möchte ein "x" oder etwas "schließen" oben rechts im Popup-Formular? Wo soll ich es in die Funktion setzen? –

Demo funktioniert jetzt nicht in Chrom. –