Блог

Главная - Вопросы по программированию - Несколько всплывающих окон, но одно и то же содержимое

Несколько всплывающих окон, но одно и то же содержимое

#javascript #popupwindow

Вопрос:

У меня на странице есть два отзывчивых всплывающих окна (функция 1 и функция 2), но я не могу понять, как изменить этот код, чтобы он работал для обоих. Пока я могу заставить работать только одного. Другое всплывающее окно просто имитирует текст из первого всплывающего окна. Эти всплывающие окна привязаны к разным кнопкам.

Одна кнопка называется «Строительство», а другая — «Поставка». У обоих есть уникальный текст, который должен отображаться во всплывающих окнах. К сожалению, если я сначала нажму на кнопку «Строительство», то этот текст будет перенесен, когда я нажму на кнопку «Поставка» во-вторых. И наоборот. Если я сначала нажму на кнопку «Поставка», то этот текст будет перенесен, когда я нажму на кнопку «Строительство».

 <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 amp; 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 amp; 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:

Во-первых, у вас не может быть 2 тега головы и 2 тега тела, но, возможно, именно так вы ставите его на stackoverflow. код работает так, как будто оба тега сценария находятся вместе (в одной области), и поэтому переменные из первого фрагмента кода могут быть доступны из второго фрагмента кода. это означает, что когда вы зададите popupWindow переменную в первой функции, а затем вызовете вторую функцию, она больше не будет равна нулю. так что это ничего не устанавливает.

Я думаю, что это можно просто решить, удалив 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 amp; Node.DOCUMENT_POSITION_CONTAINED_BY);
        if (!clickInPopup) {
            document.body.removeChild (popupWindow);
            window.removeEventListener ('click', RemovePopup, true);
            popupIsShown = false;
            popupWindow = false;
        }
 
    } 
}
Метки: ,