Cara Menampilkan Modal Form Dengan Menggunakan Jquery

Hallo teman-teman Dumet School. Kembali lagi dengan saya Shelli Ripati di kursus Web Design. Pembahasan kali ini saya akan membahas tentang Cara Menampilkan Modal From Dengan Menggunakan Jquery. Modal adalahÂ semacam kotak dialog yang muncul ketika tombol atau button diklik. Biasanya mungkin teman-teman pernah membuat modal dengan bootstrap. Dan kali ini kita akan menggunakan jquery untuk menampilkannya namun untuk tampilan htmlnya saya akan tetap menggunakan bootstrap.

Oke langsung saja langkah pertama untuk Cara Menampilkan Modal Form Dengan Menggunakan Jquery adalah membuat struktur htmlnya terlebih dahulu.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Cara Menampilkan Modal From Menggunakan Jquery</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <h1>Cara Menampilkan Modal From Menggunakan Jquery</h1>
      <button class="btn btn-primary" id="tampil">Tampilkan Modal</button>
        
        <div class="modal-dialog" role="document" id="form">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="exampleModalLabel">New message</h4>
            </div>
            <div class="modal-body">
              <form>
                <div class="form-group">
                  <label for="recipient-name" class="control-label">Recipient:</label>
                  <input type="text" class="form-control" id="recipient-name">
                </div>
                <div class="form-group">
                  <label for="message-text" class="control-label">Message:</label>
                  <textarea class="form-control" id="message-text"></textarea>
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" id="send">Send message</button>
            </div>
          </div>
        </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    
  </body>
</html>

Jika sudah selesai membuat struktur htmlnya maka kita masuk ke style cssnya sebagai berikut.

<style type="text/css">
      *{padding:0 ; margin:0}
      .container{width: 1000px;margin: auto;}
</style>

Dan langkah terakhir kita buat jquerynya ya teman-teman untuk menghilangkan dan memunculkan modal yang berisi formnya. Dan berikut scriptnya.

<script type="text/javascript">
      $(document).ready(function(){
        $('#form').hide();
        $('#tampil').click(function(){
          $('#form').show('slow');
          $('#send').click(function(){
            $('#form').hide('slow');
          });
        });
      });
</script>

Disini teman-teman bisa perhatikan script di atas. Dimana pertama saya menyembunyikan modal form dan ketika tombol dengan nama id tampil di klik maka modal form akan muncul dan ketika tombol dengan nama id send yang ada pada form di klik maka modal form akan kembali hilang.

Dan jika teman-teman tampilkan di browser, maka akan tampak seperti pada gambar di bawah ini.

Demikian artikel tentang Cara Menampilkan Modal Form Dengan Menggunakan Jquery. Sampai ketemu lagi di pembahasan berikutnya. Semoga bermanfaat dan selamat mencoba ya teman-teman.

Cara Menampilkan Modal From Dengan Menggunakan Jquery

Kategori