Question

当我在模态之外单击时，它不会关闭

我当前正在将JavaScript文件转换为jQuery，并且遇到了一个问题，即在模态之外单击会生成所需的控制台日志，但是模态不会关闭。这是针对一个已经过期的项目，由于我无法理解自己在做错的事情（我是一个非常完整的新手），因此我需要任何帮助。

我尝试了几种在这里找到的方法，但是似乎没有一种对我有用。这是我的代码，第46- 52行似乎以某种方式引起了该问题：

function showModal() {
    var $modalContainer = $('#modal-container')
        .addClass('is-visible');
}

function hideModal() {
    var $modalContainer = $('#modal-container')
        .removeClass('is-visible');
}

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

function showModal(title, image, height, etypes) {

    var $modalContainer = $('#modal-container')
        .empty();

    var modal = `<div class="modal">
                        <h1>${title}</h1>
                        <button id="modal-close" class="modal-close">&times;</button>
                        <img src="${image}">
                        <p>Height: ${height}m</p>
                        <p>Type: ${etypes}</p>
                    </div>`;

    //      var $contentElement = $('<p></p>')
    //          .text(('Elements: ' + etypes)
    //              .replace(',', ', '))
    //          .appendTo(modal);

    $modalContainer.append(modal);

    $modalContainer.addClass('is-visible');

    $('#modal-close')
        .on('click', function () {
            hideModal();

        });

// THIS AREA IS THE PROBLEM CODE    

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

// END OF AREA

    //  $modalContainer.on('click', (e) => {
    //      var target = e.target;
    //      console.log(e.target)
    //      if (target === $modalContainer) {
    //          hideModal();
    //      }
    //  });
};


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

我希望模式关闭，而不是保持打开状态并仅返回控制台日志。

如果需要更多代码，则可以在这里找到整个存储库： https://github.com/Brad-ONeill/Exercise_1.9

谢谢

在容器的外部单击时关闭我的模态

0 个答案: