JSFiddle - React, Tailwind, and code Playground

by Maz Soma

HTML

<div class="muncul">MAHO</div>
<div class="muncul2">EEQ</div>
<div class='dialog-overlay'></div>
<div id='dialog-box'>
    Selamat datang di Blog Maz Soma.<br/>
    Ini hanya contoh dialog box sederhana dengan jQuery dari Kang Ismet dengan penambahan fungsi toggle.
    <div class='close'>OK</div>
</div>
    <div id='dialog-box2'>
    Selamat datang di Blog Maz Soma.<br/>
    Ini hanya contoh dialog box yang kedua dengan isi yang berbeda dan fungsi toggle yang berbeda pula.
    <div class='close2'>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;
}
#dialog-box2 {
    position:fixed;
    top:50px;
    left:50%;
    width:320px;
    margin-left:-160px; /*setengah dari lebar kotak dialog*/
    color:#555;
    background-color:#FECC80;
    border:2px solid #FF9900;
    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;
}
.close2 {
    background:#FF3300;
    color:#fff;
    border-radius:3px;
    padding:4px;
    text-align:center;
    margin:25px auto 2px;
    cursor:pointer;
    width:30px;
}
.close:hover {
    background-color:#aaa
}
.close2:hover {
    background-color:#B22400
}
.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;
}
.muncul2...

JavaScript

$(function() {
     //Tampilkan kotak dialog saat .muncul diklik
     $('.muncul').click(function() {
          $('#dialog-box').toggle("clip");
          $('.dialog-overlay').fadeTo("normal", 0.4);
     });
     //Tutup kotak dialog saat .close diklik
     $('.close').click(function() {
          $('#dialog-box').toggle("bounce");
          $('.dialog-overlay').hide();
     });
    //Tampilkan kotak dialog ke-2 saat .muncul2 diklik
     $('.muncul2').click(function() {
          $('#dialog-box2').toggle("slide");
          $('.dialog-overlay').fadeTo("normal", 0.4);
     });
     //Tutup kotak dialog ke-2 saat .close2 diklik
     $('.close2').click(function() {
          $('#dialog-box2').toggle("fold");
          $('.dialog-overlay').hide();
     });
});