Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

Custom Alert Box Programming Tutorial

In these next 3 JavaScript programming video lessons you will be learning to create custom dynamic dialog boxes(alert, confirm, prompt). You can use the same box over and over for many different types of dialog. Dialog boxes are used to render messages that must be acknowledged, ask user to confirm critical actions that they are about to make, or asking the user for some value that allows the program to continue. When they appear, the user cannot interact with the rest of the document until they finish interacting with the dialog window. JavaScript comes equipped with stock dialog boxes that work well enough for alerting, confirming, and prompting for values. But most of the top interactive websites create their own custom dialog windows. Creating these windows yourself gives you more control over the interaction with the user, and allows you to customize every single aspect of the dialog window. It also allows you to go beyond just issuing alerts, confirmations and prompts. You can now do whatever you want in a dialog box, the only limit is your imagination. <!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>
thumb

JavaScript Videos

General Programming

Flat Icons HTML Code Symbols Discovery JavaScriptHow to Program Code Syntax Highlighter Using JavaScriptFat Arrow Functions JavaScript Programming TutorialJavaScript Arguments Object Function TutorialJavaScript Storage Interface sessionStorage localStorage TutorialMulti Column Layout Grid Programming TutorialCustom Alert Box Programming TutorialCustom Confirm Box Programming TutorialCustom Prompt Box Programming TutorialChange CSS Class Style className Toggle TutorialPartial Print Document Tutorial HTML div ContentClick Outside Close Menu Box TutorialPercent Math Calculations Programming TutorialDual Image Reveal Control TutorialPage Loading Screen Document Preloader TutorialControl Panel Flyout Menu Windows AnimationsCustom Data Attributes HTML JavaScript CSS TutorialFullscreen API JavaScript Code Examples and SpecificationConsole Log Tutorial Chrome Firefox IE BrowsersToggle Function Click Drop Down Menus TutorialChange Tab Text and Window Title On The Fly TutorialDice Roll Programming Tutorial For Web Browser GamesDynamic Lorem Ipsum Placeholder Text TutorialBest HTML Event Handling addEventListener TutorialsetAttribute removeAttribute Methods TutorialDisabled User Handling Redirect WebsiteCapture Keyboard Input Tutorial HTML ApplicationCapture Keyboard Input Condition Logic TutorialChange Style Sheet Using Tutorial CSS Swap StylesheetWeb Page Overlay Tutorial Transparent CoverLights Out For Earth Day Tutorial Dark Page SwitchWindow Size Responsive CSS Layout Stylesheet Change TutorialRead Mouse Coordinates Pointer Position Tutorial