Как заставить мой модал закрываться, когда пользователь нажимает на контейнер? - PullRequest
Новая
       19

Как заставить мой модал закрываться, когда пользователь нажимает на контейнер?

0 голосов
/ 06 июля 2019

В настоящее время я изучаю полный стек, и мой модальный режим не работает должным образом. Я немного растерян, что делать, так как я нигде не могу найти документацию, нажимая кнопку закрытия или нажимая ESC.работает, щелкнув за пределами поля нет.

Следующий код - это то, как было предложено, что я подхожу к проблеме, но она не работает.Я честно смотрю на это около часа и просто не могу соединить точки на том, что происходит (не)?Пожалуйста, извините за все комментарии и дополнительный код, так как я все еще учусь, поэтому я могу следить за тем, что происходит: 

function showModal() {
    var $modalContainer = document.querySelector('#modal-container');
    $modalContainer.classList.add('is-visible');
}

function hideModal() {
    var $modalContainer = document.querySelector('#modal-container');
    $modalContainer.classList.remove('is-visible');
}

//modal IFFE
document.querySelector('#modal-button').addEventListener('click', () => {
    showModal();
});

//-- show modal --
function showModal(title, text) {
    var $modalContainer = document.querySelector('#modal-container'); 
//Selects the element with the associated id

// Clear all content for the selected element
    $modalContainer.innerHTML = '';

    var modal = document.createElement('div'); //creates a div element withing selected element
    modal.classList.add('modal'); //assigns new class to the div element

// Add the new modal content

var closeButtonElement = document.createElement('button'); //creates the close button
    closeButtonElement.classList.add('modal-close'); //assigns a class to the new (close) button
    closeButtonElement.innerHTML = "×"; //inserts text within the new(close) button
    closeButtonElement.addEventListener('click', hideModal);

var titleElement = document.createElement('h1');
    titleElement.innerText = title;

var contentElement = document.createElement('p');
    contentElement.innerText = text;

    modal.appendChild(closeButtonElement);
    modal.appendChild(titleElement);
    modal.appendChild(contentElement);
    $modalContainer.appendChild(modal);

    $modalContainer.classList.add('is-visible');
}

document.querySelector('#modal-button').addEventListener('click', () => {
    showModal('PokéMon', 'Here is all of the info about your PokéMon');
});

window.addEventListener('keydown', (e) => {
    var $modalContainer = document.querySelector('#modal-container');
        if (e.key === 'Escape' && $modalContainer.classList.contains('is- 
   visible')) {
             hideModal();
    }
});

$modalContainer.addEventListener('click', (e) => {
    var target = e.target;
    if (target === $modalContainer) {
        hideModal();
    }
});

Ожидаемый результат: пользователь щелкает за пределами модального окна (на контейнере) и модальное закрыто.

Текущий результат: Без изменений в состоянии, модальное остается активным и видимым.Только нажав на кнопку закрытия (x) или нажав ESC можно достичь желаемого результата.

Ответы [ 2 ]

0 голосов
/ 14 июля 2019

В конце код находился в неверном месте и должен был выглядеть примерно так: 

modal.appendChild(closeButtonElement);
        modal.appendChild(titleElement);
        modal.appendChild(contentImage);
        modal.appendChild(contentHeight);
        modal.appendChild(contentElement);
        $modalContainer.appendChild(modal);

        $modalContainer.classList.add('is-visible');

        $modalContainer.addEventListener('click', (e) => {                          //listening for an event (click) anywhere on the modalContainer
            var target = e.target;
            console.log(e.target)
            if (target === $modalContainer) {
                hideModal();
            }
        });
    };

    window.addEventListener('keydown', (e) => {                                     //listening for an event (ESC) of the browser window
        var $modalContainer = document.querySelector('#modal-container');
        if (e.key === 'Escape' && $modalContainer.classList.contains('is-visible')) {
            hideModal();
        }
    });

Это потому, что изначально действие вызывалось при загрузке страницы и предназначалось для окна, а невызывается в контейнере и загружается, когда модальный груз.

Спасибо за вашу помощь

0 голосов
/ 06 июля 2019

Глядя на этот код, я не уверен, что на самом деле должно сделать модальный видимым или скрыть его.Без доступа к вашему CSS (если у вас есть).Я предполагаю, что все, что вы делаете, это добавление и удаление класса .is-visible из элемента #modal-container.

Я бы посоветовал вам применить этот класс к самому модалу, а затем вы можете включать и выключать этот класс,

Измените свой код, сделав что-то подобное (добавлено вначало кода): 

function showModal() {
    var $modalContainer = document.querySelector('#modal-container');
    $modalContainer.classList.add('is-visible');
    document.querySelector('.modal').classList.remove('hide-el')
}

function hideModal() {
    var $modalContainer = document.querySelector('#modal-container');
    $modalContainer.classList.remove('is-visible');
    document.querySelector('.modal').classList.add('hide-el')
}

Где hide-el в вашем css: 

.hide-el {
   display: none;
}

Вы также можете изменить свой код, чтобы применить класс is-visible к вашему modal элемент.Вы всегда должны пытаться присоединить class / id к элементу, которым вы хотите манипулировать, если у вас есть эта опция.

Или если у вас нет доступа к файлу css: 

document.querySelector('.modal').style.display = "none"

и 

 document.querySelector('.modal').style.display = "block"

Кроме того, ваш код кажется очень многословным, была ли эта стандартная часть задания?Вот рабочий пример: https://codepen.io/mujakovic/pen/zVJRKG

...