Membuat Obrolan Box Dengan Custom Alert

Sebenarnya sudah ada beberapa postingan yang aku buat perihal obrolan box ini, mulai dari yang memakai fungsi toggle ataupun obrolan box yang memakai alert. Nah kali ini aku share postingan perihal obrolan box juga dan masih memakai alert namun dengan custom alert sehingga tampilannya sama dengan obrolan box yang memakai toggle.

Baca juga:

Membuat Dialog Box Dengan Penambahan Fungsi Toggle

Membuat Dialog Box Sederhana Dengan Alert

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

DEMO

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="Membuat Dialog Box Dengan Custom Alert">&#215;</button>';
  }
  this.ok = function(){
   document.getElementById('dialogbox').style.top = "-300px";
   document.getElementById('dialogoverlay').style.display = "none";
  }
 }
 var Alert = new CustomAlert();
 </script>

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

Sumber https://www.kompiajaib.com/

Share this post