Formulir pop up dengan mengklik tombol

Apakah ada cara membuat formulir di jendela pop-up dengan mengklik tombol menggunakan jquery? Formulir akan memiliki beberapa kolom masukan dan tombol 'Simpan' & 'Batal'. Jadi ketika mengklik 'Simpan', informasi dalam formulir akan disimpan dalam database dan akan kembali ke layar aslinya. Saya ingin memiliki jendela pop up fade-in.


jquery popup
person yogsma    schedule 15.10.2010    source sumber

Jawaban (6)


arrow_upward
5
arrow_downward

Gunakan kode ini

HTML

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

Jquery di DOM siap

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

Kode ini akan menginisialisasi Dialog dan menempatkannya dalam keadaan siap untuk dibuka dan ditutup secara berurutan. Jika Anda ingin membuka dialog saat halaman dimuat, tambahkan baris kode ini tepat setelah kode yang telah Anda tambahkan di dokumen siap:

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

Jika sebaliknya Anda ingin membuka Dialog setelah peristiwa klik, tambahkan kode yang sama pada peristiwa klik elemen yang akan mengaktifkan pembukaan.

Tambahkan formulir Anda di dalam DIV myDialog. Jika Anda memerlukan bantuan lebih lanjut mengenai pengiriman formulir, beri kami detail lebih lanjut...

person Lorenzo    schedule 15.10.2010
comment
Ini kode saya untuk jquery : $(document).ready(function(){$('#divdeps').dialog({autoOpen:false,show:'slide',resizeable:true,position:'center',modal :BENAR});}); ...ini tidak bekerja. - person yogsma; 16.10.2010
comment
@yogsma: silakan lihat hasil edit saya di akhir jawaban saya. Selain itu, harap ada kesalahan ejaan pada kode Anda resizeable seharusnya resizable. Semoga bisa membantu! - person Lorenzo; 16.10.2010
comment
@yogsma: Ini adalah contoh yang berfungsi persis seperti pada jawaban yang menunjukkan bahwa itu berhasil. Jika tidak berfungsi mungkin ada hal lain yang merusak kode Anda. Silakan posting lebih banyak kode Anda untuk bantuan lebih lanjut. http://jsbin.com/ugetu3 - person Lorenzo; 16.10.2010

arrow_upward
1
arrow_downward

Cara membuat popup sederhana menggunakan jQuery

person Alex    schedule 15.10.2010

arrow_upward
1
arrow_downward

Temukan dialog JQuery UI.

Buat div dengan formulir Anda di dalamnya:

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

Kemudian panggil contoh dialog (tautan mungkin ini semacam penangan klik untuk memicu formulir)

                       $('#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
Kode ini hanya akan berfungsi sekali. Jika Anda menutup dialog, Anda tidak akan pernah bisa membukanya kembali... ;) silakan lihat http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/ - person Lorenzo; 15.10.2010

arrow_upward
1
arrow_downward

Berikut ini contoh penggunaan JQuery. Anda dapat memeriksa jenis popup Dialog lainnya secara detail.

<!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="/id//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/id/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

Lihat Dialog UI jQuery. Itu melakukan apa yang Anda inginkan, dan dapat dikonfigurasi untuk menambahkan animasi seperti fade-in.

person casablanca    schedule 15.10.2010

arrow_upward
-1
arrow_downward

Saya menggunakan kotak popup berikut yang terlihat lebih menarik.

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

person Salik    schedule 25.08.2013