Modal

Membuat Modal kamu membutuhkan tag <div> dengan class .modal diikuti dengan class untuk style Modal-nya, ada .modal--success, .modal--info, .modal--danger, dan .modal--warning, jika Modalnya kurang lebar, kamu bisa menambahkan class .modal--lg setelah class untuk style Modal-nya. Lalu didalamnya buat element menggunakan tag <div> dengan class .modal__content, didalamnya lagi ada 3 bagian yaitu, Header, Body, dan Footer.

Pertama, Header. Bagian header diisi dengan icon dan judul dari Modal-nya, seperti 'Data dibuat' atau 'Konfirmasi Penghapusan' dan lain-lain. Membuat Header kamu membutuhkan tag <div> dengan class .modal__header. Didalamnya terdapat dua bagian yaitu Icon dan Judul. Membuat Icon kamu perlu tag <div> dengan class .modal__icon, dan letakkan icon dari Font Awesome didalamnya. Membuat Judul kamu perlu tag <div> dengan class .modal__title, lalu didalamnya gunakan tag <h5> untuk membuat Judul.

Body, Body. Bagian Body diisi dengan penjelasan detail dari Modal-nya, kamu juga bisa menambahkan input jika diperlukan. Membuat Body kamu membutuhkan tag <div> dengan class .modal__body. Didalamnya kamu bisa menambahkan text menggunakan tag p, atau menambahkan Form seperti pada dokumentasi Form.

Footer, Footer. Bagian Footer diisi dengan Button, seperti Button untuk menutup Modal. Membuat Footer kamu membutuhkan tag <div> dengan class .modal__footer, lalu didalamnya kamu bisa membuat Button seperti pada dokumentasi Button. Jika kamu memiliki dua Button, letakkan code untuk Button Utama di bawah code untuk Button Kurang Penting, Supaya Button Utama berada di sebelah kanan dan Button Kurang Penting disebelah kiri Modal. Tambahkan juga class utilities Bootstrap untuk margin bottom .mb-2.mb-sm-0 pada Button Utama, karena pada saat lebar viewport lebih kecil sama dengan 575.98px, masing-masing Button akan mempunyai lebar 100% dan posisi Button Utama berada diatas Button Kurang Penting, sehingga kita perlu untuk menambahkan jarak kebawah pada Button Utama terhadap Button Kurang Penting.

Modal secara standar disembunyikan, kamu bisa menampilkannya dengan menambahkan class .modal--fade-in setelah class untuk style Modal-nya atau setelah class .modal. Jika kamu ingin menutup Modal-nya maka cukup hapus class .modal--fade-in. Gunakan Javascript & DOM untuk menghapus atau menambahkan class.

Tampilkan Modal Danger
Berbahaya, Apakah kamu yakin?

Aksi ini tidak bisa dibatalkan, ini akan menghapus permanen Akun @rezaSarifulFikri.

Masukkan password untuk konfirmasi penghapusan Akun!

Batal Hapus Akun 
CopyHTML
<!-- button show modal danger -->
<a href="#" class="btn btn--red" id="show-modal-danger">Tampilkan Modal Danger</a>

<!-- modal danger -->
<div class="modal modal--danger" id="modal-danger">
    <div class="modal__content">
        <div class="modal__header">
            <div class="modal__icon">
                <span class="fa fa-ban"></span>
            </div>
            <div class="modal__title">
                <h5><span>Berbahaya</span>, Apakah kamu yakin?</h5>
            </div>
        </div>
        <div class="modal__body">
            <p>Aksi ini tidak bisa dibatalkan, ini akan menghapus permanen Akun <b>@rezaSarifulFikri</b>.</p>
            <p>Masukkan password untuk konfirmasi penghapusan Akun!</p>
            <input type="password" name="password" class="form form--focus-red mt-0" placeholder="Password ...">
        </div>
        <div class="modal__footer">
            <a href="#" class="btn btn--gray-outline" id="close-modal">Batal</a>
            <a href="#" class="btn btn--red mb-2 mb-sm-0">Hapus Akun</a>
        </div>
    </div>
</div>
CopyJavascript
const btnShowModal = document.querySelector("a#show-modal-danger");
const modal = document.querySelector("div#modal-danger");
const closeModal = modal.querySelector("a#close-modal");
btnShowModal.addEventListener('click', e => {
    // hilangkan fungsi default dari tag a
    e.preventDefault();

    // tampilkan modal
    modal.classList.add("modal--fade-in");

    /* tambahkan class .stop-scrolling pada tag <body> untuk menghilangkan scroll halaman, 
    agar halaman tidak bisa di scroll */
    document.body.classList.add("stop-scrolling");
});

closeModal.addEventListener('click', e => {
    // hilangkan fungsi default dari tag a
    e.preventDefault();

    // sembunyikan/tutup modal
    modal.classList.remove("modal--fade-in");

    /* hapus class .stop-scrolling pada tag <body> agar 
    halaman bisa di scroll kembali */
    document.body.classList.remove("stop-scrolling");
});
Tampilkan Modal Info
Info, Perizinan Data

Kamu tidak memiliki izin untuk melihat data ini. Silahkan hubungi Admin jika ini salah!.

Ok, Saya mengerti
Tampilkan Modal Success
Sukses, Akun dibuat

Selamat, Akun @rezaSarifulFikri telah dibuat, sekarang kamu memiliki akses ke semua fitur.

Ok, Terimakasih
Tampilkan Modal Warning
Peringatan, Login Tidak Dikenali

Akun mu login di perangkat baru: Linux, Firefox. Beri tahu kami jika itu bukan kamu!.

Ok, Saya Mengerti 
CopyHTML
<!-- button show modal info -->
<a href="#" class="btn btn--blue" id="show-modal-info">Tampilkan Modal Info</a>

<!-- modal info -->
<div class="modal modal--info" id="modal-info">
    <div class="modal__content">
        <div class="modal__header">
            <div class="modal__icon">
                <span class="fa fa-info-circle"></span>
            </div>
            <div class="modal__title">
                <h5><span>Info</span>, Perizinan Data</h5>
            </div>
        </div>
        <div class="modal__body">
            <p>Kamu tidak memiliki izin untuk melihat data ini. Silahkan hubungi Admin jika ini salah!.</p>
        </div>
        <div class="modal__footer">
            <a href="#" class="btn btn--blue" id="close-modal">Ok, Saya mengerti</a>
        </div>
    </div>
</div>

<!-- button show modal success -->
<a href="#" class="btn btn--green" id="show-modal-success">Tampilkan Modal Success</a>

<!-- modal success -->
<div class="modal modal--success" id="modal-success">
    <div class="modal__content">
        <div class="modal__header">
            <div class="modal__icon">
                <span class="fa fa-check-circle"></span>
            </div>
            <div class="modal__title">
                <h5><span>Sukses</span>, Akun dibuat</h5>
            </div>
        </div>
        <div class="modal__body">
            <p>Selamat, Akun <b>@rezaSarifulFikri</b> telah dibuat, sekarang kamu memiliki akses ke semua fitur.</p>
        </div>
        <div class="modal__footer">
            <a href="#" class="btn btn--green" id="close-modal">Ok, Terimakasih</a>
        </div>
    </div>
</div>

<!-- button show modal warning -->
<a href="#" class="btn btn--orange" id="show-modal-warning">Tampilkan Modal Warning</a>

<!-- modal warning -->
<div class="modal modal--warning" id="modal-warning">
    <div class="modal__content">
        <div class="modal__header">
            <div class="modal__icon">
                <span class="fa fa-warning"></span>
            </div>
            <div class="modal__title">
                <h5><span>Peringatan</span>, Login Tidak Dikenali</h5>
            </div>
        </div>
        <div class="modal__body">
            <p>Akun mu login di perangkat baru: <b>Linux, Firefox</b>. <a href="">Beri tahu kami jika itu bukan kamu!</a>.</p>
        </div>
        <div class="modal__footer">
            <a href="#" class="btn btn--orange" id="close-modal">Ok, Itu Saya</a>
        </div>
    </div>
</div>