在特定页面中,用户将在实际处理之前按下按钮,但在按下按钮时,我偶尔需要向用户显示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返回选择,但我认为我不能使其显示我的selectshowModalDialog返回选择,但似乎期望另一个网页作为参数。所以它不适合我。

如何使用纯JavaScript创建弹出窗口?

最佳答案

这是一个简单的解决方案,可让您从打开的窗口中获取值。您所需要做的就是将JavaScript代码注入(inject)到打开的窗口中,该窗口将使用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

关于javascript - 用普通的javascript创建一个弹出窗口,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/16992163/

10-17 02:52