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 :
comment 0 komentar
more_vert