03 November 2014

Membuat Dialog Box Dengan Custom Alert

Dialog Box Dengan Custom Alert

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.


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

Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Konversi Code
Out Of Topic