0

ユーザーがモーダルの外側をクリックすると、モーダルを自動的に閉じようとしています。ユーザーがモーダル内をクリックしたときにモーダルを開いたままにしたいのですが、いくつかの問題が発生しています(動作しません)。

現在、画面のどこかをクリックすると、モーダルが閉じます。このモーダルは、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');
    });

});
4

1 に答える 1