JavaScript bukan hanya dijadikan pelengkap dalam interface web, namun juga menjadi bagian penting dari proses suatu transaksi dalam web.

Pada kesempatan kali ini saya ingin membeberkan cara agar JavaScript dapat mematikan interface yang sedang aktif dan menampilkan alert message dengan design keinginan kita sendiri. Contoh yang saya sajikan dapat anda coba tanpa ada bantuan framework JavaScript apapun.

Pertama-tama kita deklarasikan CSS sederhana seperti ini:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

 #divLock{                                               
   position:absolute;
   top:0px;
   left:0px;
   background-color:#000;
   opacity:0.7;
   visibility:hidden;
   z-index:10;
 }
 .window{
   position:absolute;
   top:0px;
   left:0px;
   border:1px solid #000;
   background-color:#CCCCCC;
   visibility:hidden;
   z-index:11;
   width:400px
 }

Pada script diatas kita sediakan element dengan ID divLock yang akan menjadi layer yang akan mematikan interface sementara, maksudnya adalah layer ini yang nantinya menutupi keseluruhan layar menjadi hitam dan user tidak akan bisa mengoperasikan apapun ketika layar ditutup.

Langkah kedua adalah inti dari trik ini yaitu JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

 function DivWindow(){
        var div = document.getElementById('divLock')
        if(div == null){
                document.body.innerHTML += '<div id="divLock"></div>';
                this._div = document.getElementById('divLock')
        }
        this.openWindow = _openWin;
        this.closeWindow = _closeWin;
}
function _openWin(winName){
        var win = document.getElementById(winName)
        if(win != null){
         with(this._div.style){
                visibility = 'visible';
                width = document.body.clientWidth + 'px';
                height = screen.height + 'px';
         }
         with(win.style){
                visibility = 'visible';
                left = ((document.body.clientWidth/2) - (win.offsetWidth/2)) + 'px';
                top = '200px';
         }              
        }
}
function _closeWin(winName){
        var win = document.getElementById(winName)
        if(win != null){
                win.style.visibility = 'hidden';
                this._div.style.visibility = 'hidden';
        }
}
 
window.onload = function(){
         var div = new DivWindow();
         document.getElementById('btnOpen').onclick = function(){
                div.openWindow('divAlert');
         }
         document.getElementById('btnClose').onclick = function(){
                div.closeWindow('divAlert');
         }
}

Script diatas saya buat dengan konsep OOP yang dapat anda lihat di artikel sebelumnya. Selanjutnya adalah implementasi pada HTML, yaitu:

<div id="divAlert" class="window">
 <div style="font-weight:bold; padding:2px; border:1px solid #000; background-color:#0099FF">
   My Alert
 </div>
 <div style="padding:2px;">
	Loren in sum this is just <b>sample text dari teten</b>
	 in sum <u>this is just sample</u> text in sum this is just sample text dari teten
	  in sum this is just sample text in sum <big>this is just sample</big> text dari teten
	<center><input type="button" value="Close" id="btnClose" /></center>
 </div> 
</div>
<input type="button" value="Open" id="btnOpen" />

Pada interface diatas saya sediakan sebuah tombol yang akan mengawali fungsi untuk mematikan layar yaitu tombol btnOpen, dimana deklarasi event-nya saya sudah lakukan pada listing javascript sebelumnya pada baris ke 35 s.d 37.

Maksud alert dengan design sendiri pada listing html diatas adalah pada div dengan ID divAlert dimana dia memakai class window yang memiliki properti visibility = “hidden”. divAlert ini disembunyikan sementara sampai dengan ditekannya tombol btnOpen yang akan menampilkan layer ini di tengah – tengah halaman setelah terlebih dahulu mengaktifkan layer yang menutupi interface. Gambar di bawah ini dapat memperjelas penjelasan saya sebelumnya.

Ketika layer hitam menutupi interface, user tidak dapat melakukan apa-apa kecuali menutup alert yang ada di hadapan mereka. Inilah gambaran trik alert design sendiri, anda dapat mengubah design alert ini sesuka hati.

Semoga bermanfaat… ^_^