javascript - 在窗口外部单击时自动关闭模态，但在模态窗口内部单击时保持打开状态

Question

这个问题已经有答案了:

Check if an element is a child of a parent (9 个回答)

已关闭 5 年前。

当用户在模式之外单击时，我尝试自动关闭模式。我确实希望当用户在模式中单击时模式保持打开状态，但是我遇到了一些问题(它不会工作)。

目前，如果我单击屏幕上的任意位置，模式就会关闭。该模式是使用 tailwind css 和 http://jquerymodal.com/ 构建的

我的模式代码:

<div id="interestModal" class="modalDialog invisible animated fadeIn fixed z-50 pin overflow-auto bg-smoke-dark flex">
  <div class="animated fadeInUp fixed shadow-inner max-w-md md:relative pin-b pin-x align-top m-auto justify-end md:justify-center p-8 bg-white md:rounded w-full md:h-auto md:shadow flex flex-col">
    <h2 class="text-4xl text-center font-hairline md:leading-loose text-grey md:mt-8 mb-4">Question!</h2>
    <p class="text-xl leading-normal mb-8 text-center">
      Is this Working???
    </p>
    <div class="inline-flex justify-center">
      <button id="interestClose" class="bg-grey-lighter flex-1 border-b-2 md:flex-none border-green ml-2 hover:bg-green-lightest text-grey-darkest font-bold py-4 px-6 rounded">
        Absolutely
      </button>
      <button @click="toggleModal" class="bg-grey-lighter flex-1 md:flex-none border-b-2 border-red ml-2 hover:bg-red-lightest text-grey-darkest font-bold py-4 px-6 rounded">
        Not so much
    </button>
  </div>
    <a href="#" id="closeModal" rel="modal:close" class="absolute pin-t pin-r pt-4 px-4"><svg class="h-12 w-12 text-grey hover:text-grey-darkest" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg></a>
  </div>
</div>

我的 jQuery 来处理模式:

$(document).ready(function () {
    setTimeout(function(){
        $('#interestModal').fadeIn(1000).removeClass('invisible');
    }, 10000);

    $('#interestModal .modalDialog').on('click', function(e)){
      e.addClass('invisible');
    });

});

Answer 1

你可以这样做:

$(document).click(function(e) {
    var modal_id_count = $(e.target).parents('#interestModal').length;
    if (modal_id_count < 1) {
        $("#interestModal").addClass('invisible');                        
    }
});