Làm thế nào để tạo một biểu mẫu đơn giản bật lên bằng cách sử dụng jquery và html?

Tôi đã đọc các hướng dẫn về jquery nhưng tôi có một thời gian khó hiểu nó là có ai đó có thể dạy tôi dễ dàng hơn, xin vui lòng tôi muốn xảy ra là khi tôi nhấn một trong các nút của tôi giá trị của nó sẽ hiển thị trong #valueFromMyButton và khi các cửa sổ pop modal ra tôi có thể gõ văn bản và sau khi tôi nhấn oK văn bản mà tôi gõ sẽ được đặt trên #valueFromMyModalLàm thế nào để tạo một biểu mẫu đơn giản bật lên bằng cách sử dụng jquery và 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>

Nguồn

2012-09-14 Brained Washed

cho giải pháp tốt hơn, tôi nghĩ rằng bạn có thể sử dụng jQuery UI thoại widget – HungryCoder

khó khăn như vậy để hiểu bất kỳ tuts đó là dễ dàng hơn nhiều –

bạn có thể kiểm tra điều này. http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/ – HungryCoder

tôi đã đặt ở đây thùng hoàn chỉnh cho truy vấn ở trên. bạn cũng có thể kiểm tra liên kết demo.

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

01.235.

.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

Nguồn

2012-09-14 10:24:33 gaurang171

Cảm ơn rất nhiều .. :) –

nếu tôi muốn đặt một "x" hoặc một cái gì đó "đóng" ở phía trên bên phải của biểu mẫu bật lên? Tôi nên đặt nó ở đâu? –

bản demo không hoạt động ngay bây giờ trong chrome. –