Cara Membuat Modal Dialog Ya atau Tidak

Saya hari ini akan share bagaimana cara untuk membuat modal dari boostrap 4. Modal tersebut adalah momdal dialog untuk ya atau tidak dalam program.

Membuat modal dialog yes dan tidak cukup mudah, karena kemudahan sudah di dapatkan dari boostrap 4.

Sekarang apapun bisa lebih mudah dan cepat menggunakan boostrap 4.

Langsung saja kita akan membuat modal tersebut.

Pertama kamu harus siapkan boostrap dulu. bisa di download di getbootstrap.com.

Kedua siapkan tombol untuk memunculkan modal.

<a title="Setujui Peminjaman!" href="#" class=" d-sm-inline-block btn btn-sm btn-success shadow-sm" data-toggle="modal" data-target="#setuju" >
<i class="fa fa-plus-circle"></i></i> </a>

Ketiga siapkan modal untuk ditampilkan sebagai dialog ya atau tidak.

<div class="modal fade" id="setuju" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="exampleModalLabel">Memberi Persetujuan</h5>
                      <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                      </button>
                    </div>
                    <div class="modal-body">Apakah Anda Yakin Ingin Memberi Persetujuan Peminjaman Ruangan !</div>
                    <div class="modal-footer">
                      <button class="btn btn-secondary" type="button" data-dismiss="modal">Batal</button>
                      <a class="btn btn-success" href="#">Setujui</a>
                    </div>
                  </div>
                </div>
              </div>

Pada #setuju adalah kata kunci untuk menampilkan modal yang mempunyai nama id setuju, jika di tekan maka modal tersebut akan muncul.

Sedangkan untuk pagar berwarna merah adalah link untuk aksi berikutnya jika penggguna memberikan izin atau iya pada program.

Tanda pagar bisa kamu ubah sesuai perintah kalian.

Berikut ini screenshot dari modal tersebut.

Nah cukup mudah kan sekarang kita tidak perlu lagi pusing memikirkan CSSnya gimana, JavaScriptnya gimana.

Tinggal copy paste sudah jadi modal dialog ya dan tidak.

Terimakasih sudah berkunjung enjoy :).

Share :