إغلاق تلقائي للوسيط عند النقر خارج النافذة ، ولكن اجعله مفتوحًا إذا تم النقر عليه داخل الإطار المشروط

ايم محاولة تلقائيا إغلاق مشروط عندما ينقر المستخدم خارج الوسائط. أرغب في أن تظل الوسائط مشروطة عندما ينقر المستخدم داخل الوسائط ، لكني أواجه بعض المشكلات (لن تعود لفترة العمل).

حاليا إذا قمت بالنقر فوق أي مكان على الشاشة يغلق مشروط. تم تصميم هذا المشروط باستخدام csswind 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">
    

Question!

    
Is this Working??? <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> &lt;title&gt;Close&lt;/title&gt; </div> </div>

jQuery الخاص بي للتعامل مع الوسائط:

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

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

});
0
Pedram أنها جرعة للجزء الأكبر ، ومع ذلك فإنه يتعارض مع tailwindcss في بعض الطبقات اللازمة لتشغيل ، وبالتالي فإن متطلبات مخصصة
وأضاف المؤلف Shawn Wilson, مصدر
يحتوي هذا المكوّن الإضافي بالفعل على ما تريد ، تحقق منه
وأضاف المؤلف Pedram, مصدر
نظرًا لأن #interestModal و .modalDialog يبدو أنه نفس العنصر ، فلا حاجة إلى الحصول على اسم الفئة في $ ('# interestModal .modalDialog') </رمز> ... علاوة على ذلك ، لا تستخدم مسافة بين 2 ، لأن ذلك سيبحث عن سليل مع تلك الفئة.
وأضاف المؤلف LGSon, مصدر

1 إجابة

يمكنك فعل ذلك على النحو التالي:

$(document).click(function(e) {
    var modal_id_count = $(e.target).parents('#interestModal').length;
    if (modal_id_count < 1) {
        $("#interestModal").addClass('invisible');                        
    }
});
0
وأضاف
هذا لا يزال إغلاق الوسائط حتى إذا قمت بالنقر داخلها
وأضاف المؤلف Shawn Wilson, مصدر
موافقShawnWilson اسمحوا لي مضاعفة التحقق من ذلك.
وأضاف المؤلف Himanshu Upadhyay, مصدر
ShawnWilson ، يمكنك محاولة مع رمز محدث في الإجابة؟
وأضاف المؤلف Himanshu Upadhyay, مصدر
شكرا لقبول الإجابة علىShawnWilson.
وأضاف المؤلف Himanshu Upadhyay, مصدر