用纯JavaScript创建一个弹出窗口

Question

用纯JavaScript创建一个弹出窗口

javascripthtmlpopupwindow

6

在特定页面上，用户会按下一个按钮，但在实际处理之前，我需要偶尔向用户展示一个选项列表以选择适当的选项，并使用该选择来能够继续处理。因此，基本上我需要显示一个弹出窗口，其中包含可用选项的

- Cratylus

实际的弹出窗口从可用性角度来看是不可取的...特别是如果您需要在继续之前从中获取选项。我建议使用模态窗口代替。包括jQuery完全不考虑吗？您可以使用纯JavaScript创建模态，但为什么要重复造轮子呢。 - Joe

@theJoeBiz：你所指的模态框是我也在问的modalDialog吗？是的，目前暂时不考虑使用JQuery，因为我不熟悉它。但我计划很快去了解它。 - Cratylus

@varun 下面所建议的与我谈论的基本相同。基本上，当您想要显示“弹出窗口”时，有一个隐藏的 div 可以显示。 - Joe

@theJoeBiz：但是似乎这更难使它看起来好看。我必须隐藏所有其他元素（不少），才能显示一个选择框。弹出窗口似乎更自然。请注意，我在测试后发表的评论。 - Cratylus

2个回答

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

To Hide

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

- varun

你提到的第一件事是 z-index，但你没有在任何地方包含它... - Ian

结果很奇怪。我尝试了您的代码，用户可以看到下拉框。例如，我在“shim”上放了一个按钮，在“msgbx”上放了一个“select”，但我可以看到这个“select”在按钮的下面。而且结果并不完全符合我的意图，因为这个东西必须放在一个有许多元素的页面上。我不确定结果是否像弹出窗口那样好。 - Cratylus

弹出窗口有它们自己的问题，这基本上是一个样式化的 div 解决方案，就像一个模态窗口，我已经通过 z-index 进行了修正，我留给开发人员根据代码中相对字段的 z-index 添加。 - varun

shim的id标签里有额外的空格。去掉空格以使其正常工作。 - Brandon

同样适用于msgbx…删除id标签中的空格。 - Brandon

1

抱歉各位，我直接在这里编写代码有些笨拙...希望现在好一些了。 - varun

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vadim · Accepted Answer

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