Membuat Dialog Box Dengan Custom Alert

Membuat Dialog Box Dengan Custom Alert

Rio Ilham Hadi

03 November 2014

Tutorial yang akan saya bagikan kali ini adalah "Membuat Dialog Box Dengan Custom Alert" Dengan custom alert kita bisa memodifikasi tampilan alert sehingga bisa menyesuaikan dengan selera kita dengan bantuan Javascript.

Jika sobat ingin Memasang Dialog Box keren ini bisa ikuti tutorial di bawah ini atau dengan melihat demonya, di bawah ini.

Demo

1. Masuk ke Blogger

2. Pilih Template > Edit HTML
3. Masukan CSS di bawah ini tepat di atas ]]></b:skin> atau </style>

 #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;

}

4. Kode HTML > Sobat bisa terapkan di tempat yang sobat inginkan.

 <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> 

5. Masukan Javascript di bawah ini tepat di atas kode </body> atau </head>

 <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 Dunia Blanter";
     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> 

Semoga Tutorial Ini Bermanfaat... :D

 http://www.kompiajaib.com/2014/09/membuat-dialog-box-dengan-custom-alert.html 

Share This