Membuat Style Alert Box Dengan Javascript - Mexious Media | News, Media IT & Share Knowledge
BLANTERWISDOM101

Membuat Style Alert Box Dengan Javascript

Tuesday, 26 September 2017

Assalamualaikum wr.wb

   Hai Sahabat Mexious, Kali Ini Saya Akan Memberikan Sedikit Cara Membuat Style Alet Box Dengan JavaScript. Membuat Custom Prompt Boxes dengan Javascript, Alert Box pada javascript sering digunakan pada aplikasi Web, Dengan custom alert kita bisa memodifikasi tampilan alert sehingga bisa menyesuaikan dengan selera kita dengan bantuan javascript. Untuk demonya silahkan lihat pada gambar di bawah ini.



Code Membuat Custom Prompt Boxes dengan Javascript



Code HTML :

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> #dialogoverlay{     display: none;     opacity: .8;     position: fixed;     top: 0px;     left: 0px;     background: #FFF;     width: 100%;     z-index: 10; } #dialogbox{     display: none;     position: fixed;     background: #000;     border-radius:7px;     width:550px;     z-index: 10; } #dialogbox > div{ background:#FFF; margin:8px; } #dialogbox > div > #dialogboxhead{ background: #666; font-size:19px; padding:10px; color:#CCC; } #dialogbox > div > #dialogboxbody{ background:#333; padding:20px; color:#FFF; } #dialogbox > div > #dialogboxfoot{ background: #666; padding:10px; text-align:right; } </style> <script> 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) - (550 * .5)+"px";         dialogbox.style.top = "100px";         dialogbox.style.display = "block";         document.getElementById('dialogboxhead').innerHTML = "Acknowledge This Message";         document.getElementById('dialogboxbody').innerHTML = dialog;         document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Alert.ok()">OK</button>';     }     this.ok = function(){         document.getElementById('dialogbox').style.display = "none";         document.getElementById('dialogoverlay').style.display = "none";     } } var Alert = new CustomAlert(); </script> </head> <body> <div id="dialogoverlay"></div> <div id="dialogbox">   <div>     <div id="dialogboxhead"></div>     <div id="dialogboxbody"></div>     <div id="dialogboxfoot"></div>   </div> </div> <h1>My web document content ...</h1> <h2>My web document content ...</h2> <button onclick="alert('You look very pretty today.')">Default Alert</button> <button onclick="Alert.render('You look very pretty today.')">Custom Alert</button> <button onclick="Alert.render('And you also smell very nice.')">Custom Alert 2</button> <h3>My web document content ...</h3> </body> </html>


Nah Itulah Sedikit Code Nya, Update Terus Blog Mexious, dan dapatkan informasi menarik seputar dunia IT


Wassalamualaikum wr.wb

Share This :
Muhammad Rifky Abimayu

Author Mexious Media. Mexious Media merupakan sebuah organisasi yang bergerak dibidang dunia IT, terutama untuk para DevOps & Programmer. Kami juga membuat banyak applikasi, yaitu WHOIS Tools & FreeDDNS .

Mohon Berkomentar Untuk Sopan Dan Tidak Menggunakan Link Aktif