当用户单击容器时，如何关闭我的模式？

Question

我目前正在学习一门全栈课程，但我的模态没有按预期表现我有点不知道该怎么做，因为我在任何地方都找不到任何文档，并且在单击关闭按钮或按 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 = "&times;"; //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 才能达到预期的结果。

Answer 1

通过查看这段代码，我不确定实际上应该使模态可见或隐藏它的是什么。无法访问您的 css（如果您有）。我假设您所做的只是在 #modal-container 元素中添加和删除 class .is-visible。

我建议您将此 class 应用于模态本身，然后您可以打开和关闭此 class，

修改您的代码以执行此操作（添加到您的代码之上）：

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')
}

你的 css 中的 hide-el 是：

.hide-el {
   display: none;
}

您还可以修改代码以将 is-visible class 应用于 modal 元素。如果你有这个选项，你应该总是尝试将 class/id 附加到你想要操作的元素。

或者如果您无权访问 css 文件：

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

和

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

另外，你的代码看起来很冗长，这个样板文件是作业的一部分吗？这是一个工作示例：https://codepen.io/mujakovic/pen/zVJRKG

Answer 2

代码最后放错了地方，应该看起来像这样：

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

这是因为操作最初是在页面加载时调用并在 window 中定位，而不是在容器中调用并在模态加载时加载。

感谢您的帮助

当用户单击容器时，如何关闭我的模式？

How do I get my modal to close when a user clicks on the container?

javascript

modal-dialog