Assalamualaikum wr.wb
Hai Sahabat ScriptCode, 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.
Hai Sahabat ScriptCode, 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 Hanya Sedikit Code Nya
Terimakasih telah Melihat artikel ini semoga kedepannya terus update..
Wassalamualaikum wr.wb
0 Komentar untuk "Cara Mudah Membuat Style Alert Box Menggunakan Javascripts"