it-swarm.asia

أغلق div بالنقر فوق الخارج

أريد إخفاء div من خلال النقر على الرابط الوثيق فيه ، أو بالنقر فوق أي مكان خارج هذا div.

أحاول التعليمة البرمجية التالية ، يتم فتحها وإغلاقها عن طريق النقر فوق الارتباط "إغلاق" بشكل صحيح ، ولكن إذا واجهت مشكلة في إغلاقها بالنقر فوق أي مكان خارج div.

$(".link").click(function() {
  $(".popup").fadeIn(300);
}

);
$('.close').click(function() {
  $(".popup").fadeOut(300);
}

);
$('body').click(function() {
  if (!$(this.target).is('.popup')) {
    $(".popup").hide();
  }
}

);
<div class="box">
  <a href="#" class="link">Open</a>
  <div class="popup">
    Hello world
    <a class="close" href="#">Close</a>
  </div>
</div>

العرض التوضيحي: http://jsfiddle.net/LxauG/

21
user1355300

طريقة أخرى تجعل من ثم jsfiddle الخاص بك أقل عربات التي تجرها الدواب (اللازمة انقر مرتين على فتح).

هذا لا يستخدم أي حدث مفوض إلى مستوى الجسم

اضبط tabindex="-1" على DIV .popup (وللنمط CSS outline:0)

DEMO

$(".link").click(function(e){
    e.preventDefault();
    $(".popup").fadeIn(300,function(){$(this).focus();});
});

$('.close').click(function() {
   $(".popup").fadeOut(300);
});
$(".popup").on('blur',function(){
    $(this).fadeOut(300);
});
32
A. Wolff

انت تحتاج

$('body').click(function(e) {
    if (!$(e.target).closest('.popup').length){
        $(".popup").hide();
    }
});
23
Arun P Johny

أقترح استخدام طريقة stopPropagation () كما هو موضح في الكمان المعدل:

كمان

$('body').click(function() {
    $(".popup").hide();
});

$('.popup').click(function(e) {
    e.stopPropagation();
});

وبهذه الطريقة ، يمكنك إخفاء الإطار المنبثق عند النقر على النص الأساسي ، دون الحاجة إلى إضافة علامة إضافية ، وعندما تنقر على النافذة المنبثقة ، لا يطفو الحدث على الجسم بالانتقال إلى القائمة المنبثقة.

6
Jonas Grumann

كنت أفضل الذهاب مع شيء من هذا القبيل. ما عليك سوى إعطاء معرف لل div الذي تريد إخفاءه وجعل وظيفة كهذه. استدعاء هذه الوظيفة عن طريق إضافة حدث onclick على الجسم.

function myFunction(event) { 

if(event.target.id!="target_id")
{ 
    document.getElementById("target_id").style.display="none";
  }
}
1
anuj152

أضف خلفية شفافة تستوعب حجم النافذة بالكامل ، مباشرةً قبل div المنبثق

.transparent-back{
    position: fixed;
    top: 0px;
    left:0px;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.5);
}

ثم بنقرة واحدة ، قم برفض النافذة المنبثقة.

$(".transparent-back").on('click',function(){
    $('popup').fadeOut(300);
});
1
Rajat Talwar

ربما تمت الإجابة على هذا السؤال هنا . قد تكون هناك بعض المشكلات المحتملة عند مقاطعة نشر الحدث ، كما أوضح ذلك Philip Walton في هذا المنشور .

قد يكون النهج/الحل الأفضل هو إنشاء حدث مسج مخصص ، على سبيل المثال clickoutside. لدى Ben Alman منشور رائع ( هنا ) يشرح كيفية تنفيذ واحدة (ويشرح أيضًا كيفية عمل الأحداث الخاصة) ، ولديه تطبيق لطيف لـ هو ( هنا ).

المزيد من القراءة عن أحداث jQuery API والأحداث الخاصة jQuery:

0
lookingaround