6

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?

4
  • 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
    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
    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
    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
    Jun 7, 2013 at 20:35

2 Answers 2

8

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

5
  • +1. document.getElementById('value').value = value;. So from the new window I have access to the elements of the first window? Also is there a way to make it modal? I.e. the user can not switch to the first window until the second is closed?
    – Cratylus
    Jun 7, 2013 at 20:42
  • @Cratylus Yes, you can access scripts of parent window via window.opener.fn() (where fn is some function defined in global scope) and even DOM elements i.e. window.opener.document.getElementById('value') = this.value. To emulate modal mode you can make some div that will cover the whole area of the parent window and prevent event propagation (just put it as the last child of body), once you end up with child window - remove it to restore default behaviour.
    – Vadim
    Jun 7, 2013 at 20:53
  • make some div that will cover the whole area of the parent window and prevent event propagation. If I do this, the parent window will not show its contents then?
    – Cratylus
    Jun 7, 2013 at 21:44
  • Any help on the modal simulation
    – Cratylus
    Jun 8, 2013 at 17:50
  • @Cratylus Here is an example with half transparent div that emulates modal mode jsbin.com/uqamiz/4/edit
    – Vadim
    Jun 8, 2013 at 19:24
2

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";
6
  • The first thing you mention is the z-index, yet you don't include it anywhere...
    – Ian
    Jun 7, 2013 at 20:17
  • The result is strange.I tried your code and the select box is visible to the user.E.g. I put a button on shim and a select on msgbx but I can see the select under the button. Also the result is not exactly what I had in mind as this must go to a page with many elements. I am not sure if the result would be as good as a pop up
    – Cratylus
    Jun 7, 2013 at 20:33
  • Popups have their own sets of problem, this is basically a styled div solution, like a model window, I have corrected it with z-index which I had left for the dev to add based on relative fields z-index in the code
    – varun
    Jun 7, 2013 at 20:35
  • the id tag for shim has an extra space in it. Remove the space to get this to work.
    – Brandon
    Apr 9, 2014 at 18:52
  • 1
    sorry about the spaces guys, it was clumsy of me to directly write code here ....hopefully its better now
    – varun
    Apr 10, 2014 at 8:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.