多个弹出窗口但内容相同

问题描述

我的页面中有两个响应式弹出窗口（函数 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;
        }
 
    } 
}

javascript popupwindow popupwindow