Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

Custom Prompt Box Programming Tutorial

Learn to create custom prompt boxes to replace the default prompt dialog box in JavaScript. The script below includes the objects for rendering Alert, Confirm and Prompt box dialog windows dynamically. See the custom alert box programming tutorial for in depth explanations about the structure of the code used in this tutorial. Click the link below to read the article about using bracket notation to allow functions to be called according to dynamic strings. example.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="dialog.css"> <script src="dialog.js"></script> <script> function changeText(val){ document.getElementById('status').innerHTML = val; } function doStuff(val){ document.body.style.background = val; } </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 id="status">Default Text</h1> <button onclick="Prompt.render('Type some text:','changeText')">Change Text</button> <button onclick="Prompt.render('Type a color name:','doStuff')">Do stuff</button> <button onclick="Alert.render('Hello World')">Alert</button> </body> </html> dialog.js 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(); function CustomConfirm(){ this.render = function(dialog,op,id){ 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 = "Confirm that action"; document.getElementById('dialogboxbody').innerHTML = dialog; document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Confirm.yes(\''+op+'\',\''+id+'\')">Yes</button> <button onclick="Confirm.no()">No</button>'; } this.no = function(){ document.getElementById('dialogbox').style.display = "none"; document.getElementById('dialogoverlay').style.display = "none"; } this.yes = function(op,id){ if(op == "delete_post"){ deletePost(id); } document.getElementById('dialogbox').style.display = "none"; document.getElementById('dialogoverlay').style.display = "none"; } } var Confirm = new CustomConfirm(); function CustomPrompt(){ this.render = function(dialog,func){ 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 = "A value is required"; document.getElementById('dialogboxbody').innerHTML = dialog; document.getElementById('dialogboxbody').innerHTML += '<br><input id="prompt_value1">'; document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Prompt.ok(\''+func+'\')">OK</button> <button onclick="Prompt.cancel()">Cancel</button>'; } this.cancel = function(){ document.getElementById('dialogbox').style.display = "none"; document.getElementById('dialogoverlay').style.display = "none"; } this.ok = function(func){ var prompt_value1 = document.getElementById('prompt_value1').value; window[func](prompt_value1); document.getElementById('dialogbox').style.display = "none"; document.getElementById('dialogoverlay').style.display = "none"; } } var Prompt = new CustomPrompt(); dialog.css #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; }
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