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

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

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

2 个答案: