JSFiddle - React, Tailwind, and code Playground

by MAz Mawan

HTML

<div class="muncul">Munculkan Dialog</div>
<div id='dialog-overlay'></div>
<div id='dialog-box'>
    Selamat datang di Blog Kompi Ajaib.<br/>
    Ini hanya contoh dialog box sederhana dengan jQuery dari Kang Ismet dengan penambahan fungsi toggle.
    <div class='close'>OK</div>
<div>

CSS

#dialog-box {
    position:fixed;
    top:50px;
    left:50%;
    width:320px;
    margin-left:-160px; /*setengah dari lebar kotak dialog*/
    color:#555;
    background-color:#ddd;
    border:2px solid #ccc;
    box-shadow: 0 0 2px 1px black,0 0 10px black;
    font:normal 12px Arial;
    line-height:1.6em;
    padding:15px;
    text-align:left;
    border-radius:5px;
    z-index:1000;
    display:none;
    text-align:center;
}
.close {
    background:#bbb;
    color:#fff;
    border-radius:3px;
    padding:4px;
    text-align:center;
    margin:25px auto 2px;
    cursor:pointer;
    width:30px;
}
.close:hover {
    background-color:#aaa
}
#dialog-overlay {
    position:fixed !important;
    position:absolute; /*tambahkan posisi ini supaya fix di IE*/
    z-index:999; /*nilai ini harus dibawah nila z-index pada kotak dialog*/
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    background-color:#000;
    display:none;
}
.muncul {
 font-size:14px;
 font-family:Arial;
 font-weight:normal;
 border-radius:5px;
 border:1px solid #dcdcdc;
 padding:5px 10px;
 text-decoration:none;
 background-color:#ededed;
 color:#777777;
 display:inline-block;
 text-shadow:1px 1px 0px #ffffff;
  box-shadow:inset 1px 1px 0px 0px #ffffff;
    cursor:pointer;
}
.muncul:hover {
 background-color:#dfdfdf;
}

JavaScript

$(function() {
     //Tampilkan kotak dialog saat .muncul diklik
     $('.muncul').click(function() {
          $('#dialog-box').toggle("explode");
          $('#dialog-overlay').fadeTo("normal", 0.4);
     });
     //Tutup kotak dialog saat .close diklik
     $('.close').click(function() {
          $('#dialog-box').toggle("bounce");
          $('#dialog-overlay').hide();
     });
});