在特定页面中,用户将在实际处理之前按下按钮,但在按下按钮时,我偶尔需要向用户显示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创建弹出窗口?
最佳答案
这是一个简单的解决方案,可让您从打开的窗口中获取值。您所需要做的就是将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/