Membuat Modal Popup Overlay Menggunakan SASS

Tutorial ini akan menggunakan SASS, jadi bila Anda masih belum mengenal apa itu SASS silahkan baca artikel yang membahas mengenai SASS disini, Anda juga bisa membaca cara Setup SASS menggunakan NodeJS dan Gulp terlebih dahulu.

Popup modal adalah jendela sembul yang muncul di sebuah aplikasi baik dengan disengaja ataupun sekarang ini banyak pula yang tanpa dilakukan perintah oleh User namun tiba-tiba muncul popup modal tersebut. Dalam sebuah aplikasi ataupun halaman website popup modal seringkali digunakan ketika kita ingin memberikan informasi ataupun meminta User melakukan sesuatu namun kita tidak ingin User kita meninggalkan halaman yang sedang dikunjunginya sekarang. Salah satu praktek yang seringkali digunakan adalah untuk membuat form log-in register, dimana biasanya menggunakan popup modal Sebagai penampung nya.

Tentu ada banyak alternatif diluar sana untuk membuat sebuah popup modal, dari yang sederhana, yang mainstream, sampai yang kompleks secara fungsi maupun tampilan. Salah satu yang sering kalian gunakan mungkin Bootstrap modal, ya karena memang framework ini salah satu yang paling mainstream di kalangan web developer. Namun kali ini kita akan coba belajar bagaimana membuat sebuah popup modal sederhana dengan cara yang semoga juga masih mudah untuk kalian ikuti dan pelajari. Bukan berarti Saya tidak suka Bootstrap, saya hanya suka untuk membuat sesuatu lebih sederhana. Kita semua tau lah Bootstrap keren dan mudah digunakan.

Oke, kita mulai saja membuat popup modal sederhana nya, silahkan ikuti ya.

Pertama kita coba buat block untuk modal nya, kode ini saya coba ikuti dari bagaimana Bootstrap membuat modal nya namun coba disederhanakan dan pastinya dibuat lebih BEM biar lebih nyaman di hati, berikut contoh kodenya :

<div id="modalPlain" class="modal" role="modal">
  <div class="modal__content">
    <div class="modal__header">
      <span class="modal__close">×</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal__body">
      <p>Some text in the Modal Body</p>
    </div>
    <div class="modal__footer">
      <h3>Modal Footer</h3>
    </div>
  </div>
</div>

Setelah membuat block modal diatas, waktunya memberikan sentuhan style pada block tersebut agar lebih cantik. Berikut kodenya :

.modal
{
    display: none; 
    position: fixed; 
    z-index: 999; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4);   
 
    &__header{        
        padding: 2px 16px;      
    }
 
    &__content {
        position: relative;
        background-color: $white;
        margin: 15% auto;
        padding: 0;
        width: 80%;
 
        box-shadow : 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
         
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s;
        
    } 
 
    &__body {
        padding: 2px 16px;
    }
 
    &__footer {
        padding: 2px 16px;
    }
 
    &__close {
        float: right;
        font-size: 28px;
        font-weight: bold;
        color: $grey;
        cursor: pointer;
        text-decoration: none;
 
        &:hover, &:focus {
            text-decoration: none;
        }
    }
}
 
@-webkit-keyframes animatetop {
    from {top: -300px; opacity: 0} 
    to {top: 0; opacity: 1}
}
 
@keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}

Dengan kode SASS diatas mungkin kita tidak bisa melihat hasilnya, karena sudah ada rule display: none; di class .modal, maka untuk mengetesnya tinggal coba dihapus terlebih dahulu rule tersebut. Pastikan tampilan popup modal sudah sesuai dengan yang kalian harapkan.

Oh iya kode SASS tersebut sudah menggunakan variabel colors milik saya jadi mungkin akan ada error di tempat Anda, jadi silahkan ganti variabel $white dan $grey dengan hex yang sebenarnya atau mudahnya ganti dengan warna solid white dan grey saja.

Sampai langkah kedua, kita sebenarnya udah berhasil membuat popup modal kita dengan cepat. Langkah selanjutnya yang perlu dipikirkan adalah switch rule di dalam class .modal yang tadinya display: none; menjadi display: block;. Perlu dipikirkan juga bagaimana cara trigger agar membuka modal ini.

Belajar dari Bootstrap, biasanya untuk men-trigger modal di Bootstrap Kita bisa menggunakan kode :

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button> 

Bila dilihat, mereka menambahkan attribute data-toggle="modal" serta data-target="modal_id_target", kita bisa buat mirip seperti ini, namun dengan cara yang berbeda. Berikut contoh kode nya :

<button class="button button--blue" data-show="modal" data-target="modalPlain">
  Open Modal 
</button>

Dan terakhir yang akan kita buat adalah fungsi Javascript yang akan men-switch class modal agar bisa hide/show dengan lancar serta mencari modal mana yang seharusnya ditampilkan ketika di trigger dari suatu elemen.

Berikut contoh kode sederhana nya :

var triggerBtn = $('[data-show=modal]').click(function(event){
		var modalId = $(this).attr('data-target');        
		$('#' + modalId).show();
});

$('.modal__close').click(function(event){        
		$(this).parents('.modal').hide();
});

$(window).click(function(event){
		if (event.target.className === 'modal') {
				$(event.target).hide();
		}
});

Setelahnya kita juga perlu menambahkan fungsi sederhana untuk hide/show lewat Javascript, karena siapa tau ada yang ingin trigger tanpa lewat definisi di elemen tersebut kan. Berikut kode sederhananya :

function modalShow(modalId){
    $('#' + modalId).show();
}
 
function modalHide(modalId){
    $('#' + modalId).hide();
}

Sayangnya fungsi yang kita buat masih bergatung pada jQuery, tapi bila ada masukan mungkin bisa dicoba cara yang lebih sederhana menggunakan VanillaJS saja. Ini saya buat menggunakan jQuery karena saya terlalu malas.

Semua kode dalam artikel kali ini saya ambil dari framework kesayangan saya BEM-Kit. Anda bisa melihat cheatsheet mengenai modal pada halaman ini, kalau penasaran dengan hasilnya bisa juga dilihat dari halaman demo disini.

Demikian sharing mengenai membuat *popup modal *sederhana. Semoga bermanfaat ya.

Ditulis oleh Irfan Maulana