Jquery Modal：在后台单击添加类并删除html

Question

我对jquery很新。如果您通过添加类并删除它来单击背景，则此代码应该关闭模式。为什么这不起作用的任何想法？请＆amp;谢谢

<!-- modal conent-->
<div class="modal" id="modal"><!--black background to the modal -->
  <div class="modal-content ">
    <h1>Tricks Are 4 Kids</h1>
    <p>stuff here....</p>
    <button href="#" class="close" id="close" >X</button>
  </div>
</div>  
<!-- page conent-->
<div id="page-content-wrapper" >I am a div with all the page conent. lalalalala</div>

Jquery的

$(document).ready( function() {
$('#modal').on('click', function(e) {
  if (e.target !== this)
    return;

  $('#modal').addClass('md-effect', function() {
        $(this).remove('300');
    });  }); 
  // If user clicks on the background add class for animation of modal and then removes html
});

Answer 1

这里有几个问题。

From the docs

.remove( [selector ] )

  

选择

     

类型：字符串

     

一个选择器表达式，用于过滤要删除的匹配元素集。

您没有元素名称为300的元素，因此不会删除任何内容。

从文档中，.addClass()有两个签名：

  

.addClass（className）

     

的className

     

类型：字符串

     

要添加到每个匹配元素的class属性的一个或多个以空格分隔的类。

或

  

addClass（function）

     

功能

     

类型：Function（Integer index，String currentClassName）=＆gt;串

     

一个函数，返回一个或多个以空格分隔的类名，以添加到现有的类名中。接收集合中元素的索引位置和现有类名称作为参数。在函数内，这指的是集合中的当前元素。

没有.addClass( classname [, function ])签名，因此无法正常工作，第二个参数（回调）将被忽略：

$('#modal').addClass('md-effect', function() {
        $(this).remove('300');
 }); 

最后，(e.target !== this)本身还不够。只需这样，如果单击模态内的按钮或其他元素，它将在模态外注册为单击。您还需要检查被点击的元素是否也是模态的后代。

为了完成这项工作，您可以使用.addClass()和setTimeout

$(document).ready(function() { 
  $(document).mouseup(function(e) {
    var $modal = $("#modal");
    // if the target of the click isn't the container... nor a descendant of the container
    if ($modal.is(e.target) || $modal.has(e.target).length !== 0) return;
    $modal.addClass('md-effect');
    setTimeout(function() { $modal.remove(); }, 300);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- page conent-->
<div id="page-content-wrapper">I am a div with all the page conent. lalalalala</div>
<!-- modal conent-->
<div class="modal" id="modal">
  <!--black background to the modal -->
  <div class="modal-content">
    <h1>Tricks Are 4 Kids</h1>
    <p>stuff here....</p>
    <button href="#" class="close" id="close">X</button>
  </div>
</div>