在普通的javascript中创建一个弹出窗口

Question

在特定页面中,用户将按下按钮但是在实际处理之前按下按钮,我偶尔需要向用户呈现options选择适当的一个列表并使用该选择以便能够进行处理.
所以基本上我需要显示一个弹出窗口,显示一个select包含可用选项的框,并获取用户的选择,然后继续处理.
所以要做到这一点,我发现我需要一个组合,window->open/prompt/showModalDialog
我找到了一种方法,通过选项通过选项向用户显示一个弹出窗口

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>");  

只传递一个选项的示例.
但我似乎无法找到如何取回选择.
在prompt另一方面,返回的选择,但我不认为我可以把它显示我的select.
该showModalDialog回报的选择,但似乎期待着另一个网页作为参数.所以它不适合我.

如何使用普通javascript创建弹出窗口？

Answer 1

这是一个简单的解决方案,允许您从打开的窗口中获取值.您只需要将JavaScript代码注入打开的窗口,该窗口将使用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;
}

这里的工作示例:http://jsbin.com/uqamiz/1/edit