ป๊อปอัปแบบฟอร์มเมื่อคลิกปุ่ม

มีวิธีสร้างแบบฟอร์มในหน้าต่างป๊อปอัปเมื่อคลิกปุ่มโดยใช้ jquery หรือไม่? แบบฟอร์มจะมีช่องใส่ข้อมูลน้อยและมีปุ่ม 'บันทึก' และ 'ยกเลิก' ดังนั้นเมื่อคลิก 'บันทึก' ข้อมูลในรูปแบบจะถูกบันทึกลงในฐานข้อมูลและจะกลับสู่หน้าจอเดิม ฉันต้องการมีหน้าต่างป๊อปอัปเฟดอิน


jquery popup
person yogsma    schedule 15.10.2010    source แหล่งที่มา

คำตอบ (6)


arrow_upward
5
arrow_downward

ใช้รหัสนี้

HTML

<div id="divdeps" style="display:none" title=""></div>

Jquery บน DOM พร้อมแล้ว

$("#divdeps").dialog({
    autoOpen: false,
    show: 'slide',
    resizable: false,
    position: 'center',
    stack: true,
    height: 'auto',
    width: 'auto',
    modal: true
});

รหัสนี้จะเริ่มต้นกล่องโต้ตอบและวางไว้ในสถานะพร้อมที่จะเปิดและปิดอย่างต่อเนื่อง หากคุณต้องการเปิดกล่องโต้ตอบเมื่อเพจโหลด ให้เพิ่มบรรทัดโค้ดนี้ต่อจากโค้ดที่คุณได้เพิ่มในเอกสารพร้อมแล้ว:

$("#divdeps").dialog('open');

หากคุณต้องการเปิดกล่องโต้ตอบตามเหตุการณ์การคลิก ให้เพิ่มโค้ดเดียวกันในเหตุการณ์การคลิกขององค์ประกอบที่ควรเริ่มการทำงานของการเปิด

เพิ่มแบบฟอร์มของคุณภายใน myDialog DIV หากคุณต้องการความช่วยเหลือเพิ่มเติมเกี่ยวกับการส่งแบบฟอร์ม เพียงให้รายละเอียดเพิ่มเติมแก่เรา...

person Lorenzo    schedule 15.10.2010
comment
นี่คือรหัสของฉันสำหรับ jquery : $(document).ready(function(){$('#divdeps').dialog({autoOpen:false,show:'slide',resizeable:true,position:'center',modal :จริง});}); ...มันไม่ทำงาน. - person yogsma; 16.10.2010
comment
@yogsma: โปรดดูการแก้ไขของฉันในตอนท้ายของคำตอบ นอกจากนี้ โปรดมีการสะกดผิดในรหัสของคุณ resizeable ควรเป็น resizable หวังว่ามันจะช่วยได้! - person Lorenzo; 16.10.2010
comment
@yogsma: นี่คือตัวอย่างการทำงานที่ตรงตามคำตอบที่แสดงให้เห็นว่าใช้งานได้ หากใช้งานไม่ได้อาจมีอย่างอื่นขัดข้องในโค้ดของคุณ โปรดโพสต์รหัสของคุณเพิ่มเติมเพื่อขอความช่วยเหลือเพิ่มเติม http://jsbin.com/ugetu3 - person Lorenzo; 16.10.2010

arrow_upward
1
arrow_downward

วิธีสร้างป๊อปอัปอย่างง่ายโดยใช้ jQuery

person Alex    schedule 15.10.2010

arrow_upward
1
arrow_downward

ค้นหากล่องโต้ตอบ JQuery UI

สร้าง div ด้วยแบบฟอร์มของคุณ:

<div id=form>
 your form here
</div>

จากนั้นเรียกอินสแตนซ์ของกล่องโต้ตอบ (ลิงก์ probaby นี่คือตัวจัดการการคลิกเพื่อทริกเกอร์แบบฟอร์ม)

                       $('#form').dialog({
                            modal: true,
                            buttons:
                          { "Cancel": function() {
                              $(this).dialog("close")
                          },
                              "Submit": function() {
                               //put code here for form submission
                           }
                       });
person tpow    schedule 15.10.2010
comment
รหัสนี้จะใช้ได้เพียงครั้งเดียว หากคุณปิดกล่องโต้ตอบ คุณจะไม่สามารถเปิดใหม่ได้อีก... ;) โปรดดูที่ http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/ - person Lorenzo; 15.10.2010

arrow_upward
1
arrow_downward

นี่คือตัวอย่างการใช้ JQuery คุณสามารถตรวจสอบกล่องโต้ตอบป๊อปอัปประเภทอื่นๆ โดยละเอียดได้

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Animation</title>
  <link rel="stylesheet" href="/th//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/th/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });

    $( "#opener" ).on( "click", function() {
      $( "#dialog" ).dialog( "open" );
    });
  } );
  </script>
</head>
<body>

<div id="dialog" title="Basic dialog">
  <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

<button id="opener">Open Dialog</button>


</body>
</html>
person David    schedule 30.09.2016

arrow_upward
0
arrow_downward

ดูที่ กล่องโต้ตอบ jQuery UI มันทำสิ่งที่คุณต้องการทุกประการ และสามารถกำหนดค่าให้เพิ่มภาพเคลื่อนไหว เช่น การเฟดอินได้

person casablanca    schedule 15.10.2010

arrow_upward
-1
arrow_downward

ฉันใช้กล่องป๊อปอัปต่อไปนี้ซึ่งดูน่าสนใจยิ่งขึ้น

http://gristmill.github.io/jquery-popbox/

person Salik    schedule 25.08.2013