多個彈出窗口但內容相同
[英]Multiple popups but same content
問題描述
我的頁面中有兩個響應式彈出窗口（function1 和 function2），但我無法弄清楚如何修改此代碼以使其適用於兩者。 到目前為止，我只能讓一個工作。 另一個彈出窗口只是模仿第一個彈出窗口中的文本。 這些彈出窗口與不同的按鈕相關聯。
一鍵稱為“施工”，一鍵稱為“供應”。 兩者都有獨特的文本，需要在彈出窗口 windows 中顯示。 不幸的是，如果我先點擊“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', 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>
1 個解決方案
解決方案1
0 已采納 2021-05-04 21:47:08
首先，你不能有 2 個頭部標簽和 2 個身體標簽，但也許這就是你把它放在 stackoverflow 上的方式。 該代碼就像兩個腳本標記在一起（在同一范圍內）一樣工作，因此可以從第二段代碼訪問第一段代碼中的變量。 這意味着當你在第一個 function 中設置popupWindow變量，然后調用第二個 function 時，它將不再是 null。 所以它沒有設置任何東西。
我認為這可以通過刪除if(!popupWindow)來解決（或者如果你不想讓所有代碼每次都運行，你也可以將 innerHTML 部分移到 if 之外）。
document.removeChild實際上並沒有刪除變量並將其設置為 null，我相信它只是從文檔中刪除了該元素。 您還可以將popupWindow = null添加到您的RemovePopup function 中，如下所示：
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;
}
}
}
將更多彈出窗口綁定到同一標記或合並彈出窗口內容
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.