This article shows how to send and return values using the modal dialog. We learn how to send an array object information to the modal dialog and return an Object back to the parent window.
Method to show Modal Dialog
function showModal()
{
// Object to be sent the modal dialog
var obj = [{"name":"tutorials2learn","url":"https://www.tutorials2learn.com"}, {"name":"sampleName","url":"http://www.sampleURL.com"}, {"name":"sampleName2","url":"http://www.sampleURL2.com"},{"name":"sampleName3","url":"http://www.sampleURL3.com"}]
var dialogWin = window.showModalDialog('modal.html',
obj, "dialogwidth: 450; dialogheight: 300; resizable: yes"); // Showing the Modal Dialog
// Below Part will be executed after the dialog window is closed.
document.getElementById('name').innerHTML = dialogWin.name;
document.getElementById('url').innerHTML = dialogWin.url;
document.getElementById('dynText').innerHTML = 'Returned Values are:';
}
The above method, ‘showModal()’ will open a modal dialog window, with an array of information into it. The array object used here is ‘obj‘.
Send the Data back to the Parent window
window.returnValue
The above mentioned .returnValue will be used to send the data back to the parent window.
window.returnValue = {key:'value',key2:'value2'};
Sample implementation is given below. There are two files;. index.html and modal.html.
index.html
<html>
<head>
<script type="text/javascript">
function showModal()
{
var obj = [{"name":"tutorials2learn","url":"https://www.tutorials2learn.com"}, {"name":"sampleName","url":"http://www.sampleURL.com"}, {"name":"sampleName2","url":"http://www.sampleURL2.com"},{"name":"sampleName3","url":"http://www.sampleURL3.com"}] // Object to be sent the modal dialog
var dialogWin = window.showModalDialog('modal.html',
obj, "dialogwidth: 450px; dialogheight: 300px; resizable: yes"); // Showing the Modal Dialog
// Below Part will be executed after the dialog window is closed.
document.getElementById('name').innerHTML = dialogWin.name;
document.getElementById('url').innerHTML = dialogWin.url;
document.getElementById('dynText').innerHTML = 'Returned Values are:';
}
</script>
</head>
<body >
<p id="dynText" >Sending Object: <em>[{"name":"tutorials2learn","url":"https://www.tutorials2learn.com"}, {"name":"sampleName","url":"http://www.sampleURL.com"}, {"name":"sampleName2","url":"http://www.sampleURL2.com"},{"name":"sampleName3","url":"http://www.sampleURL3.com"}]</em></p>
<p>
Name: <em id="name"></em><br>
Url: <em id="url"></em>
</p>
<a href="#" onclick="showModal();" >Show Modal</a>
</body>
</html>
modal.html
<html>
<head>
<script type="text/javascript">
// generate Select Box with values received from the parent window.
function genOptions(){
var opts = window.dialogArguments;
var selBox = document.getElementById('selOpt');
for(var i =0;i<opts.length;i++){
selBox.options[i] = new Option(opts[i].name,opts[i].url);
}
}
// Send the selected Values as an Object to the parent window.
function sendValues(){
var selBox = document.getElementById('selOpt');
sendObj = {name:selBox.options[selBox.selectedIndex].text,url:selBox.value};
window.returnValue = sendObj;
window.close();
}
</script>
</head>
<body >
<p>choose your option:<br >
<select id="selOpt">
</select>
</p>
<a href="#" onclick="sendValues();" >Save</a>
<script>
genOptions();
</script>
</body>
</html>
Run, index.html to explore the example.