时间戳

首页 > 解决方案 > 当用户点击容器时，如何让我的模式关闭？

javascript - 当用户点击容器时，如何让我的模式关闭？

问题描述

我目前正在学习一门完整的堆栈课程，但我的模式没有按预期运行我有点不知所措，因为我在任何地方都找不到任何文档，并且在单击关闭按钮或按 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 才能获得所需的结果。

标签： javascriptmodal-dialog

解决方案

通过查看此代码，我不确定实际上应该使模态可见或隐藏它。无法访问您的 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元素。如果您有该选项，您应该始终尝试将类/id 附加到要操作的元素。

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

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

和

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

此外，您的代码似乎非常冗长，这是作业的样板部分吗？这是一个工作示例：https ://codepen.io/mujakovic/pen/zVJRKG

推荐阅读