5

在特定页面中，用户将按下按钮，但在实际处理之前按下按钮时，我偶尔需要向用户展示一个列表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>");

仅传递一个选项的示例。
但我似乎无法找到如何取回选择。另一方面返回选择，但我认为我不能让它显示我
的. 返回选择，但似乎期望另一个网页作为参数。所以它不适合我。 promptselect
showModalDialog

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

4

2 回答 2

8

这是一个简单的解决方案，可让您从打开的窗口中获取值。您只需将 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

于 2013-06-07T20:35:27.587 回答
2

最简单的方法是有一个具有高 z-index 的叠加 div，透明背景充当叠加层。然后，您可以拥有另一个 div，它位于覆盖层上方（具有更高的 z-index）并包含列表标记

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>

显示弹出窗口

document.getElementById('shim').style.display=document.getElementById('msgbx').style.display ="block";

隐藏

document.getElementById('shim').style.display=document.getElementById('msgbx').style.display ="none";
于 2013-06-07T20:15:01.657 回答