Html 用普通的 javascript 创建一个弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16992163/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create a popup window in plain javascript
提问by Cratylus
In a specific page a user will press a button but on button press beforethe actual processing, I need occasionally to present to the user a list of optionsto 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 selectbox with available options and get the user's selection and thencontinue 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
在特定页面中，用户将按下一个按钮，但在实际处理之前按下按钮，我偶尔需要向用户提供一个列表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>");
Example for passing just one option.
But I can not seem to find how to get back the selection.
The prompton the other hand returns the selection, but I don't think I can make it display my select.
The showModalDialogreturns the selection, but seems to expect another web page as a parameter. So it is not suitable for me.
仅传递一个选项的示例。
但我似乎无法找到如何取回选择。
在prompt另一方面，返回的选择，但我不认为我可以把它显示我的select。
在showModalDialog返回的选择，但似乎期待着另一个网页作为参数。所以不适合我。
How can I create my pop-up using plain javascript?
如何使用纯 JavaScript 创建弹出窗口？
回答by Vadim
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:
这是一个简单的解决方案，可让您从打开的窗口中获取值。您所需要的只是将 JavaScript 代码注入到打开的窗口中，该窗口将使用window.opener以下命令与父窗口交互：
HTML
HTML
<input id="value" />
<button onclick="openWindow();">Open</button>
JavaScript
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
这里的工作示例：http: //jsbin.com/uqamiz/1/edit
回答by varun
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
最简单的方法是叠加一个具有高 z-index 的 div，透明背景充当叠加层。然后，您可以有另一个 div，它位于叠加层上方（具有更高的 z-index）并包含列表标记
CSS
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
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";
