Menampilkan modal dengan Javascript ~ Pemrograman dan Teknologi

Modal adalah tampilan berbentuk kotak atau semacamnya yang muncul di depan halaman seperti menu atau popup. Untuk menampilkan dan membuat modal tidak terlihat, kita bisa menggunakan "style.display". Kita bisa menggunakan fixed ataupun absolute sebagai nilai position.

<HTML>
<HEAD>
    <title>Belajar Javascript</title>
</HEAD>
<link rel="stylesheet" href="styleku.css">
<BODY>
    <button id="tombolku">Open Modal</button>
    <div id="myModal" class="penghalang">
        <div class="modal-content">
            <span id="tutup">&times;</span>
            <p>ini adalah Modal..</p>
        </div>
    </div>
    <Script src="scriptku.js"></Script>
</BODY> 
</HTML>

Setelah mengetik kode HTML di atas, buat file baru dengan nama "scriptku.js".

var modal = document.getElementById('myModal');
var btn = document.getElementById("tombolku");
var span = document.getElementById("tutup");

btn.onclick = function() {
    modal.style.display = "block";
}

span.onclick = function() {
    modal.style.display = "none";
}

window.onclick = function(e) {
    if (e.target == modal) {
        modal.style.display = "none";
    }
}

Yang terakhir, ketik Style CSS berikut ini!

/*Penghalang*/
.penghalang {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

/*Modal */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/*Tombol X*/
#tutup {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

#tutup:hover,
#tutup:focus {
    color: black;
    cursor: pointer;
}

Simpan style di atas dalam file CSS dengan nama "styleku.css". Setelah semua file disimpan, buka kode HTML-nya di browser, dan lihat hasilnya!!!