多个弹出窗口但内容相同

Question

我的页面中有两个响应式弹出窗口（功能 1 和功能 2），但我不知道如何修改此代码以使其对两者都适用。到目前为止，我只能让一个人工作。另一个弹出窗口只是模仿第一个弹出窗口中的文本。这些弹出窗口绑定到不同的按钮。

一个按钮称为“建设”，一个按钮称为“供应”。两者都有需要在弹出窗口中显示的独特文本 windows。不幸的是，如果我先点击“Construction”按钮，那么当我第二次点击“Supply”按钮时，这个文本就会被转移到。反之亦然。如果我先点击“供应”按钮，那么当我点击“建造”按钮时，这段文字会被带走。

<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', RemovePopup, 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', 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', RemovePopup, true);
                popupIsShown = false;
            }
        } 
    }
 </script>
</head>
<body>
 <input type="button" value="Supply" onclick="function2();"/>
</body>

Answer 1

首先，你不能有 2 个 head 标签和 2 个 body 标签，但也许你就是这样把它放在 Whosebug 上的。该代码的工作方式就好像两个脚本标记在一起（在同一范围内）一样，因此可以从第二段代码访问第一段代码中的变量。这意味着当您在第一个函数中设置 popupWindow 变量，然后调用第二个函数时，它不再为空。所以它没有设置任何东西。

我认为这可以通过删除 if(!popupWindow) 来解决（或者如果你不想每次都编写所有代码运行你也可以将 innerHTML 部分移到如果).

document.removeChild 实际上并没有删除变量并将其设置为空，它只是从我认为的文档中删除了该元素。您还可以将 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;
        }
 
    } 
}

多个弹出窗口但内容相同

Multiple popups but same content

javascript

popupwindow