如何解决多个弹出窗口但内容相同
我的页面中有两个响应式弹出窗口(函数 1 和函数 2),但我不知道如何修改此代码以使其对两者都有效。到目前为止,我只能让一个工作。另一个弹出窗口只是模仿第一个弹出窗口中的文本。这些弹出窗口与不同的按钮相关联。
一个按钮称为“建设”,一个按钮称为“供应”。两者都有需要在弹出窗口中显示的独特文本。不幸的是,如果我先点击“Construction”按钮,那么当我第二次点击“Supply”按钮时,这个文本就会被继承。反之亦然。如果我先点击“Supply”按钮,那么当我点击“Construction”按钮时,这段文字会被继承。
<head>
<script type="text/javascript">
var popupWindow = null;
var popupIsShown = false;
function function1() {
if (!popupIsShown) {
if (!popupWindow) {
popupWindow = document.createElement ("div");
popupWindow.style.backgroundColor = "white";
popupWindow.style.border = "solid black 2px";
popupWindow.style.position = "absolute";
popupWindow.style.width = "400px";
popupWindow.style.height = "150px";
popupWindow.style.top = "200px";
popupWindow.style.left = "250px";
popupWindow.innerHTML = " NOTE: None of the actions described here will begin until funds are received.";
}
document.body.appendChild (popupWindow);
window.addEventListener ('click',RemovePopup,true);
popupIsShown = true;
event.stopPropagation ();
}
}
}
function RemovePopup(event) {
if (popupIsShown) {
var relation = popupWindow.compareDocumentPosition (event.target);
var clickInPopup = (event.target == popupWindow) || (relation & Node.DOCUMENT_POSITION_CONTAINED_BY);
if (!clickInPopup) {
document.body.removeChild (popupWindow);
window.removeEventListener ('click',true);
popupIsShown = false;
}
}
}
</script>
</head>
<body>
<input type="button" value="Construction" onclick="function1();"/>
</body>
<head>
<script type="text/javascript">
var popupWindow = null;
var popupIsShown = false;
function function2() {
if (!popupIsShown) {
if (!popupWindow) {
popupWindow = document.createElement ("div");
popupWindow.style.backgroundColor = "white";
popupWindow.style.border = "solid black 2px";
popupWindow.style.position = "absolute";
popupWindow.style.width = "400px";
popupWindow.style.height = "150px";
popupWindow.style.top = "200px";
popupWindow.style.left = "250px";
popupWindow.innerHTML = "Depending on the dollar value and urgency of the work.";
}
document.body.appendChild (popupWindow);
window.addEventListener ('click',true);
popupIsShown = false;
}
}
}
</script>
</head>
<body>
<input type="button" value="Supply" onclick="function2();"/>
</body>
解决方法
首先,你不能有 2 个 head 标签和 2 个 body 标签,但也许这就是你把它放在 stackoverflow 上的方式。代码就像两个脚本标记在一起(在同一范围内)一样工作,因此可以从第二段代码访问第一段代码中的变量。这意味着当您在第一个函数中设置 popupWindow
变量,然后调用第二个函数时,它将不再为 null。所以它没有设置任何东西。
我认为这可以通过删除 if(!popupWindow)
来解决(或者如果您不想每次都运行所有代码,您也可以将 innerHTML 部分移到 if 之外)。
document.removeChild
实际上并没有删除变量并将其设置为 null,它只是从我相信的文档中删除了该元素。
您还可以做的是将 popupWindow = null
添加到您的 RemovePopup
函数中,如下所示:
function RemovePopup(event) {
if (popupIsShown) {
var relation = popupWindow.compareDocumentPosition (event.target);
var clickInPopup = (event.target == popupWindow) || (relation & Node.DOCUMENT_POSITION_CONTAINED_BY);
if (!clickInPopup) {
document.body.removeChild (popupWindow);
window.removeEventListener ('click',RemovePopup,true);
popupIsShown = false;
popupWindow = false;
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。