Introduction

Modal Dialog's are not as well known to webmasters as popup windows, alert box's, and prompts, however they give a new way of displaying information to the end-user. Modal dialogs take focus from the browser which forces users to make a decision on the window or close it before they will be allowed to resume their browsing.

The Webpage Modal Dialog script enables you to request information from the user dynamically through javascript. All that is needed is to pass an array into the function, and then disseminate the result

Layman Example:
question[0] = "What color?"
question[1] = "What plant?"
someField = answer[0]
someField = answer[1]

Demonstration

Code: With Your Function

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Webpage Modal Dialog</title> <script language="javascript"> // // Window Modal Dialog (Version 5) // Some Rights Reserved // webdeveloper.50webs.com // function modalDialog(url, query, width, height){ var output = ""; if (window.showModalDialog) { // Internet Explorer 4+ and Firefox 3+ output = window.showModalDialog(url, query, "dialogwidth: " +width+ "; dialogheight: " +height+ "; resizable: yes"); return output; } else { for (i=0; i<query.length; i++) { output += prompt(query[i], ""); if (i != query-1) { output+= "," } } return output.split(','); } } </script> <script language="javascript"> function yourFunction(){ var modalFile = "modal.htm"; // Required var question = new Array(); // Required question[0] = "What is your name?"; // Edit as neccessary question[1] = "What is your age?"; // Edit as neccessary var response = modalDialog(modalFile, question, 300, 200); // Required document.getElementById('name').innerHTML = response[0]; // Edit as neccessary document.getElementById('age').innerHTML = response[1]; // Edit as neccessary } </script> </head> <body> <input type="button" value="Launch your function" onclick="yourFunction();" /><br /><br /> Name: <div id="name"></div><br /> Age: <div id="age"></div> </body> </html>

Code: Modal Window

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Modal Window</title> </head> <body onunload="sendResponse();"> <script language="javascript"> // // Window Modal Dialog (Version 5) // Modal Window // Some Rights Reserved // webdeveloper.50webs.com // function sendResponse() { var data = "" var fields = document.getElementsByTagName("input").length -1; for (i=0; i<fields; i++) { data += document.getElementsByTagName("input")[i].value; if (i != fields-1) { data+= "," } } window.returnValue = data.split(','); window.close(); } var questions = window.dialogArguments; questions = questions.toString(); var temp = new Array(); temp = questions.split(','); document.write('<table style="padding:0px;width:100%;">'); for (i=0; i<temp.length; i++) { document.write('<tr><td valign="top">'); document.write( temp[i] ); document.write('</td><td align="right" valign="top">'); document.write('<input id="field_' +i+ '" style="float:right;" />'); document.write('</td></tr>'); } document.write('</table>'); document.write('<br /><input type="submit" value="Submit" onclick="sendResponse();" />'); </script> </body> </html>

Get and View Page Updates

Mozilla Firefox Documentation

Internet Explorer Documentation

Report an Error | Return to Top