Question

我使用JS模式（没有jquery），因为我对这种方法有一些问题......

除了移动用户无法关闭它之外，一切都很好。

var modal = document.getElementById('myModal');
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
};

这可能与我错过的那种感觉有关......

我试着像这样的jquery：

$(document).ready(function(){
    $(modal).on('click touchstart', function() {
        modal.style.display = "none";
    });
});

这里的问题是，如果用户点击模态内部，它也会消失......

我需要的是，当用户仅在外部点击时，模态应该消失......

任何想法如何解决这个问题？

感谢。

Answer 1

而不是注册点击目标，在文档上注册，然后检查鼠标是否在目标内

$(document).on ('mouseup touchstart', function (e)
{
    var container = $("#myModal");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});

Answer 2

您是否尝试过使用contains？

我刚刚在iOS safari和chrome上测试过，它运行正常

请查看演示，

单击黄色部分时，它仍然存在

但是，当您单击粉红色部分时，整个模态将隐藏

JS Bin

JS Bin中的

代码

var pa = document.querySelector('#modal-overlay');
var ch = document.querySelector('#modal-container');

pa.addEventListener('click', function(e) {
  if (!ch.contains(e.target)) {
    pa.style.display = 'none';
  }
});

Answer 3

你可以聆听＆mousedown＆＃39;在文档上的事件，然后检查模态是否在事件路径中。如果不是，则隐藏模态。如果是，那就什么都不做。

＆＃13;

var myModal = document.getElementById('myModal');

document.addEventListener('mousedown', function(e)
{
    if (e.path.indexOf(myModal) == -1)
    myModal.hidden = true;
});

＆＃13;

莫代尔不会在手机上关闭

3 个答案: