Question

我遇到了以下问题：我有一个模态，当我点击导航上的一个按钮时，它会滑入，模态上有一个关闭按钮来关闭它。但是当我点击模式外，我也想要关闭它。

  $('.open').on('click', function(){
     $('.modal').animate({ 'marginTop': '0px' }, 500);
  })

 $('.close, .main-content').on('click', function(){
     $('.modal').animate({ 'marginTop': '-50px' }, 500);
 })

这是我的Codepen来展示我的问题。 http://codepen.io/larz/pen/cCiwg

Answer 1

您的示例中的问题是，当您单击“打开”时，两个点击事件都会执行。因此它会立即打开然后关闭。

要解决此问题，只需将event.stopPropagation()添加到“打开”点击处理程序即可。这样可以防止点击事件冒泡到.main-content。

$('.open').on('click', function(ev){
    ev.stopPropagation();
    $('.modal').animate({ 'marginTop': '0px' }, 500);
});

http://codepen.io/anon/pen/djmun

jQuery - 显示和隐藏模态

1 个答案: