tutorial pengembangan web terbaru
 

Bootstrap JS Modal

❮ Sebelumnya Berikutnya Referensi ❯

JS Modal (modal.js)

The Modal plugin adalah jendela kotak / popup dialog yang ditampilkan di atas halaman saat ini.

Untuk tutorial tentang kata modal, baca Bootstrap Modal Tutorial .

The Modal Plugin Kelas

Kelas Deskripsi
.modal Menciptakan modal suatu
.modal-content Gaya yang modal baik dengan perbatasan, latar belakang warna, dll Gunakan kelas ini untuk menambahkan modal sundulan, tubuh, dan footer.
.modal-header Mendefinisikan gaya untuk header dari modal yang
.modal-body Mendefinisikan gaya untuk tubuh modal yang
.modal-footer Mendefinisikan gaya untuk footer di modal tersebut. Catatan: Daerah ini adalah benar-blok secara default. Untuk mengubah ini, menimpa CSS dengan text-align: left | center
.modal-sm Menentukan modal kecil
.modal-lg Menentukan modal besar
.fade Menambahkan efek animasi / transisi yang memudar modal yang masuk dan keluar

Memicu Modal Via data-* Atribut

Tambahkan data-toggle="modal" dan data-target="#modalID" untuk setiap elemen.

Catatan: Untuk <a> elemen, menghilangkan data-target , dan menggunakan href="#modalID" sebagai gantinya:

Contoh

<!-- Buttons -->
<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Links -->
<a data-toggle="modal" href="#myModal">Open Modal</a>

<!-- Other elements -->
<p data-toggle="modal" data-target="#myModal">Open Modal</p>
Cobalah sendiri "

Pemicu Via JavaScript

Aktifkan manual dengan:

Contoh

$("#myModal").modal()
Cobalah sendiri "

modal Pilihan

Pilihan bisa dilalui melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan untuk data-, seperti pada data-backdrop="" .

Nama Mengetik kegagalan Deskripsi Cobalah
backdropboolean or the string "static"true Menentukan apakah modal tersebut harus memiliki overlay gelap:

  • true - overlay gelap
  • false - tidak ada overlay (transparan)

Jika Anda menentukan nilai "static" , tidak mungkin untuk menutup modal ketika mengklik di luar itu

Menggunakan JS menggunakan data yang
keyboardbooleantrue Menentukan apakah modal tersebut dapat ditutup dengan tombol escape (Esc) :

  • true - modal yang dapat ditutup dengan Esc
  • false - modal yang tidak bisa ditutup dengan Esc
Menggunakan JS menggunakan data yang
showbooleantrue Menentukan apakah akan menampilkan modal ketika diinisialisasi Menggunakan JS menggunakan data yang

Metode modal

Tabel berikut berisi metode modal semua tersedia.

metode Deskripsi Cobalah
.modal( options ) Mengaktifkan konten sebagai modal a. Lihat pilihan di atas nilai-nilai yang valid Cobalah
.modal("toggle") Matikan modal yang Cobalah
.modal("show") Membuka modal yang Cobalah
.modal("hide") Menyembunyikan modal yang Cobalah

modal Acara

Tabel berikut berisi peristiwa modal semua tersedia.

Peristiwa Deskripsi Cobalah
show.bs.modal Terjadi bila modal yang hendak ditampilkan Cobalah
shown.bs.modal Terjadi bila modal sepenuhnya ditampilkan (setelah transisi CSS telah selesai) Cobalah
hide.bs.modal Terjadi bila modal yang hendak disembunyikan Cobalah
hidden.bs.modal Terjadi bila modal sepenuhnya tersembunyi (setelah transisi CSS telah selesai) Cobalah
contoh

contoh

Login Modal

Contoh berikut membuat modal untuk login:

Contoh

<div class="container">
  <h2>Modal Login Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-default btn-lg" id="myBtn">Login</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 style="color:red;"><span class="glyphicon glyphicon-lock"></span> Login</h4>
        </div>
        <div class="modal-body">
          <form role="form">
            <div class="form-group">
              <label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
              <input type="text" class="form-control" id="usrname" placeholder="Enter email">
            </div>
            <div class="form-group">
              <label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
              <input type="text" class="form-control" id="psw" placeholder="Enter password">
            </div>
            <div class="checkbox">
              <label><input type="checkbox" value="" checked>Remember me</label>
            </div>
            <button type="submit" class="btn btn-default btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
          </form>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-default btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
          <p>Not a member? <a href="#">Sign Up</a></p>
          <p>Forgot <a href="#">Password?</a></p>
        </div>
      </div>
    </div>
  </div>
</div>
Cobalah sendiri "

❮ Sebelumnya Berikutnya Referensi ❯