In a specific page a user will press a button but on button press before the actual processing, I need occasionally to present to the user a list of options to select the appropriate one and use that selection in order to be able to proceed the processing.
So essentially I need to display a pop-up window that shows a select box with available options and get the user's selection and then continue processing.
So to do this I found that I need a combination of window->open/prompt/showModalDialog
I found a way to present a pop-up window to the user with the options via

var newWindow = window.open("", null, "height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");  
newWindow.document.write("<select>");   
newWindow.document.write("<option>");  
newWindow.document.write(obj);  
newWindow.document.write("</option>");  
newWindow.document.write("</select>");  

Example for passing just one option.
But I can not seem to find how to get back the selection.
The prompt on the other hand returns the selection, but I don't think I can make it display my select.
The showModalDialog returns the selection, but seems to expect another web page as a parameter. So it is not suitable for me.

How can I create my pop-up using plain javascript?

In a specific page a user will press a button but on button press before the actual processing, I need occasionally to present to the user a list of options to select the appropriate one and use that selection in order to be able to proceed the processing.
So essentially I need to display a pop-up window that shows a select box with available options and get the user's selection and then continue processing.
So to do this I found that I need a combination of window->open/prompt/showModalDialog
I found a way to present a pop-up window to the user with the options via

var newWindow = window.open("", null, "height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");  
newWindow.document.write("<select>");   
newWindow.document.write("<option>");  
newWindow.document.write(obj);  
newWindow.document.write("</option>");  
newWindow.document.write("</select>");  

Example for passing just one option.
But I can not seem to find how to get back the selection.
The prompt on the other hand returns the selection, but I don't think I can make it display my select.
The showModalDialog returns the selection, but seems to expect another web page as a parameter. So it is not suitable for me.

How can I create my pop-up using plain javascript?

• javascript
• html
• popupwindow

• Actual popup windows are a big no-no from a usability standpoint...especially if you need to get an option from it before continuing. I recommend using a modal window instead. Is including jQuery completely off the table? You can create a modal with plain javascript, but why reinvent the wheel. – Joe Commented Jun 7, 2013 at 20:13
• @theJoeBiz:Is the modal you are refering the modalDialog I am also asking about? Yes, JQuery for the moment is out, since I don't know it.It is in my plans to look into it soon – Cratylus Commented Jun 7, 2013 at 20:15
• What @varun is suggesting below is right along the same lines of what I was talking about. Basically having a hidden div that is shown when you want your "popup" to display. – Joe Commented Jun 7, 2013 at 20:19
• @theJoeBiz:But it seems that this is harder to make it appear nice.I must hide all other elements (which are not few) to display a select box. A pop up seems more natural. Also see my comment to after I tested this. – Cratylus Commented Jun 7, 2013 at 20:35

2 Answers 2

Here is a simple solution that will allow you to fetch value from opened window. All you need is to inject JavaScript code into opened window that will interact with the parent window using window.opener:

HTML

<input id="value" />
<button onclick="openWindow();">Open</button>

JavaScript

function openWindow() {
    var i, l, options = [{
       value: 'first',
       text: 'First'
    }, {
       value: 'second',
       text: 'Second'
    }],
    newWindow = window.open("", null, "height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");  

    newWindow.document.write("<select onchange='window.opener.setValue(this.value);'>");
    for(i=0,l=options.length; i<l; i++) {
        newWindow.document.write("<option value='"+options[i].value+"'>");  
        newWindow.document.write(options[i].text);  
        newWindow.document.write("</option>");
    }
    newWindow.document.write("</select>");
}

function setValue(value) {
    document.getElementById('value').value = value;
}

Working example here: http://jsbin.com/uqamiz/1/edit

The easiest way is to have a superimposed div with a a high z-index, with transparent background acting as an overlay. You could then have another div which is centered above the overlay(with higher z-index) and containing the list markup

CSS

#shim {
opacity: .75;
filter: alpha(opacity=75);
-ms-filter: "alpha(opacity=75)";
-khtml-opacity: .75;
-moz-opacity: .75;
background: #B8B8B8;
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
z-index:990
}

#msgbx {
position: absolute;
left: 50%;
top: 50%;
height: 150px;
width: 350px;
margin-top: -75px;
margin-left: -175px;
background: #fff;
border: 1px solid #ccc;
box-shadow: 3px 3px 7px #777;
-webkit-box-shadow: 3px 3px 7px #777;
-moz-border-radius: 22px;
-webkit-border-radius: 22px;
z-index:999
}

HTML

<div id="shim"></div>
<div id="msgbx">inject list markup here</div>

To show popup

document.getElementById('shim').style.display=document.getElementById('msgbx').style.display ="block";

To Hide

document.getElementById('shim').style.display=document.getElementById('msgbx').style.display ="none";