Javascript 多个弹出窗口但内容相同

我的页面中有两个响应性弹出窗口（function1和function2），但我不知道如何修改此代码以使其同时适用于这两个窗口。到目前为止，我只能找到一个工作。另一个弹出窗口只是模仿第一个弹出窗口中的文本。这些弹出窗口绑定到不同的按钮

一个按钮称为“施工”，一个按钮称为“供应”。两者都有需要在弹出窗口中显示的唯一文本。不幸的是，如果我先单击“构造”按钮，那么当我第二次单击“供应”按钮时，此文本将被传递到。反之亦然。如果我先单击“供应”按钮，那么当我单击“施工”按钮时，此文本将被带入

var popupWindow=null；
var popupIsShown=假；
函数function1（）{
如果（！popupishown）{
如果（！popupWindow）{
popupWindow=document.createElement（“div”）；
popupWindow.style.backgroundColor=“白色”；
popupWindow.style.border=“纯黑2px”；
popupWindow.style.position=“绝对”；
popupWindow.style.width=“400px”；
popupWindow.style.height=“150px”；
popupWindow.style.top=“200px”；
popupWindow.style.left=“250px”；
popupWindow.innerHTML=“注意：在收到资金之前，此处描述的任何操作都不会开始。”；
}
document.body.appendChild（popupWindow）；
window.addEventListener（'click'，RemovePopup，true）；
popupIsShown=真；
event.stopPropagation（）；
}
}
}
函数RemovePopup（事件）{
如果（popupIsShown）{
var关系=popupWindow.ComparedDocumentPosition（事件.目标）；
var clickInPopup=（event.target==popupWindow）| |（relation&Node.DOCUMENT_POSITION_CONTAINED_BY）；
如果（！clickinpoup）{
document.body.removeChild（弹出窗口）；
window.removeEventListener（'click'，RemovePopup，true）；
popupIsShown=假；
}
} 
}
var popupWindow=null；
var popupIsShown=假；
函数function2（）{
如果（！popupishown）{
如果（！popupWindow）{
popupWindow=document.createElement（“div”）；
popupWindow.style.backgroundColor=“白色”；
popupWindow.style.border=“纯黑2px”；
popupWindow.style.position=“绝对”；
popupWindow.style.width=“400px”；
popupWindow.style.height=“150px”；
popupWindow.style.top=“200px”；
popupWindow.style.left=“250px”；
popupWindow.innerHTML=“取决于工作的美元价值和紧迫性。”；
}
document.body.appendChild（popupWindow）；
window.addEventListener（'click'，RemovePopup，true）；
popupIsShown=真；
event.stopPropagation（）；
}
}
}
函数RemovePopup（事件）{
如果（popupIsShown）{
var关系=popupWindow.ComparedDocumentPosition（事件.目标）；
var clickInPopup=（event.target==popupWindow）| |（relation&Node.DOCUMENT_POSITION_CONTAINED_BY）；
如果（！clickinpoup）{
document.body.removeChild（弹出窗口）；
window.removeEventListener（'click'，RemovePopup，true）；
popupIsShown=假；
}
} 
}

首先，你不能有两个头部标签和两个身体标签，但也许这正是你在stackoverflow上放置它的方式。代码的工作方式就像两个脚本标记在一起（在同一范围内），因此第一段代码中的变量可以从第二段代码中访问。这意味着当您在第一个函数中设置

popupWindow

变量，然后调用第二个函数时，它将不再为null。所以它没有设置任何东西

我认为这可以通过删除

if（！popupWindow）

来解决（或者如果您不想每次都运行所有代码，也可以将innerHTML部分移到if之外）

document.removeChild

实际上并没有删除变量并将其设置为null，它只是从文档中删除了该元素。 您还可以将

popupWindow=null

添加到

removepoop

函数中，如下所示：

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

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