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（如果有）。我假设您正在做的就是从.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')
}

css中hide-el的位置是：

.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

Answer 2

代码最后放在不正确的位置，应该看起来像这样：

    [ 
        {"42": {
                  "3" : {
                "title": "Script Usage:- Call Opening , Closing, Prompts",
                "Rating_id": 42,
                "rating": "3",
                "rate_count": 2
              },
                 "5" : {
                "title": "Script Usage:- Call Opening , Closing, Prompts",
                "Rating_id": 42,
                "rating": "5",
                "rate_count": 5
              }}
            },
             { "43" :
            { "3": {
              "title": "Active Listening / Paraphrasing / Probing /  Acknowledgement / Understanding  / Interruption",
                "Rating_id": 43,
                "rating": "3",
                "rate_count": 3
              },
               "5" : {
                "title": "Active Listening / Paraphrasing / Probing /  Acknowledgement / Understanding  / Interruption",
                "Rating_id": 43,
                "rating": "5",
                "rate_count": 4
              }}
            }
]

这是因为该操作最初是在页面加载时调用的，并在窗口内定位的，而不是在容器内调用并在模式加载时加载的。

感谢您的帮助

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

2 个答案: