Membuat Dialog Box Dengan Custom Alert

Sebenarnya sudah ada beberapa postingan yang saya buat tentang dialog box ini, mulai dari yang menggunakan fungsi toggle ataupun dialog box yang menggunakan alert. Nah kali ini saya share postingan tentang dialog box juga dan masih menggunakan alert namun dengan custom alert sehingga tampilannya sama dengan dialog box yang menggunakan toggle.

Baca juga:

Dengan custom alert kita bisa memodifikasi tampilan alert sehingga bisa menyesuaikan dengan selera kita dengan bantuan javascript. Untuk demonya silahkan lihat pada gambar gif di bawah ini atau silahkan coba pada link demonya.

Dialog Box Dengan Custom Alert


Kode CSS


#dialogoverlay{
display: none;
opacity: .7;
position: fixed;
top: 0px;
left: 0px;
background: #000;
width: 100%;
z-index: 10;
}
#dialogbox{
top: -300px;
position: fixed;
background: #000;
width:350px;
z-index: 10;transition:all 400ms ease-in-out;box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
}
#dialogbox > div{
    background:#FFF;
    margin:8px;
    text-align:center
}
#dialogbox > div > #dialogboxhead{
    background: #666;
    font:18px Arial;
    font-weight:400;
    padding:10px;
    color:#efefef;
}
#dialogbox > div > #dialogboxbody{
    background:#222;
    padding:20px;
    color:#efefef;
    font:14px Arial;
    font-weight:400;
}
#dialogbox > div > #dialogboxfoot{
    background:#222;
    padding:0px;
    text-align:right;
}
#dialogbox > div > #dialogboxfoot button{
    position:absolute;
    top:-10px;
    right:-10px;
    background:#000;
    border:none;
    border-radius:50%;
    height:25px;
    width:25px;
    outline:none;
    color:#fff;
    line-height:25px;
    font:bold 16px Arial;
    text-align:center;
    cursor:pointer;
}
.buttonalert{
    background:#efefef;
    border:1px solid #ddd;
    margin:0 auto;
    padding:5px 18px;
    font:14px Arial;
    font-weight:700;
    color:#333;
    text-align:center;
    display:inline-block;
    border-radius:3px;
    cursor:pointer;
}

Kode HTML


<div id="dialogoverlay"></div>
<div id="dialogbox">
  <div>
    <div id="dialogboxhead"></div>
    <div id="dialogboxbody"></div>
    <div id="dialogboxfoot"></div>
  </div>
</div>
<div class='buttonalert' onclick="Alert.render('Semoga Anda menemukan apa yang Anda cari.')">Custom Alert</div>

Kode Javascript


<script type='text/javascript'>
function CustomAlert(){
this.render = function(dialog){
var winW = window.innerWidth;
   var winH = window.innerHeight;
var dialogoverlay = document.getElementById('dialogoverlay');
   var dialogbox = document.getElementById('dialogbox');
dialogoverlay.style.display = "block";
   dialogoverlay.style.height = winH+"px";
dialogbox.style.left = (winW/2) - (350 * .5)+"px";
   dialogbox.style.top = "150px";
   dialogbox.style.display = "block";
document.getElementById('dialogboxhead').innerHTML = "Selamat Datang Di Blog Kompi Ajaib";
   document.getElementById('dialogboxbody').innerHTML = dialog;
document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Alert.ok()" title="Close this">&#215;</button>';
}
this.ok = function(){
document.getElementById('dialogbox').style.top = "-300px";
document.getElementById('dialogoverlay').style.display = "none";
}
}
var Alert = new CustomAlert();
</script>

Untuk kode javascriptnya silahkan simpan di atas kode </head> atau simpan tepat di bawah kode HTML-nya. Untuk kalimat yang muncul di dalam dialog boxnya silahkan sesuaikan pada kode HTML dan javascriptnya.

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments