Щелкните в любом месте страницы, чтобы закрыть div

У меня есть оверлейный div, который исчезает, когда я нажимаю на элемент DOM. Я хотел бы быть в состоянии закрыть его, когда я нажимаю в любом месте на странице (за исключением самого DIV), но он не работает .. Вот мой код:Щелкните в любом месте страницы, чтобы закрыть div

//Script for showing the DIV called overlay. 
     <script> 
     $(function() { 
      $('#loginfooter').click(function(){ 
       $('#overlay').fadeIn(200,function(){ 
        $('#box').animate({'top':'20px'},'slow'); 


       }); 
       return false; 
      }); 
      $('#boxclose').click(function(){ 
       $('#box').animate({'top':'-800px'},500,function(){ 
        $('#overlay').fadeOut('fast'); 
       }); 
      }); 


     }); 
    </script> 

//Script for hiding the div after clicking anywhere.. 
    <script> 
     $(document).ready(function(){ 
      $('#overlay').on('click',function(ev){ 
       var myID = ev.target.id; 
       if(myID!=='overlay'){ 
        $('#box').animate({'top':'-800px'},500,function(){ 
         $('#overlay').fadeOut('fast'); 
        }); 
       } 
      }); 
     }); 


    </script>

источник

2013-06-27 Suvimo

Это то, что вам нужно: http://benalman.com/projects/jquery-outside-events-plugin/ – elclanrs

Не могли бы вы настроить [jsfiddle] (http://jsfiddle.net)? – Niklas

@elclanrs, должен быть способ сделать это без плагина! – Suvimo

Просто замените это:

$('#overlay').on('click', function (ev) {

с этим

$(document).on('click', function (ev) {

и попробуйте еще раз ....

На самом деле, когда вы нажимаете на элемент overlay, значение переменной myID всегда равно == 'overlay'. Следовательно, он никогда не входит в утверждение if.

источник

2013-06-27 08:47:57

Без эффекта. На самом деле у меня был документ в начале, но я его изменил. – Suvimo

Пожалуйста, разместите функциональный пример, который иллюстрирует вашу проблему на [jsFiddle] (http://jsfiddle.net/). Мне нужно будет изучить это ... –

jsfiddle.net/YLBwr Спасибо! – Suvimo

DEMO 1

$(document).on('click',function(e){ 
    if(!$(e.target).closest('#overlay').length) 
     $('#overlay').hide(); 
});

Другая возможность без использования какого-либо события делегата:

DEMO 2

$('#overlay').on('blur', function (e) { 
    $(this).hide(); 
});

Даже вы будете видеть большинство людей, используя первый способ, с помощью второй избежит чтобы использовать какое-либо мероприятие делегата, которое лучше ИМО. Вам просто нужно сосредоточиться на наложении при открытии или при добавлении в DOM, в зависимости от вашего конкретного случая.

источник

2013-06-27 08:51:20

http://jsfiddle.net/YLBwr/ См. Эту скрипку, которая объясняет ситуацию больше. – Suvimo

На самом деле, это решение, игнорируйте тот факт, что в оверлее есть ящик. – Suvimo

@ Сувимо Нет, ты проверил мой jsfiddle? Тот, который вы отправили в комментарии –

Будет ли это работать для вас: jsfiddle?

Я изменил это:

if(myID!=='overlay'){

к этому

if(myID=='overlay'){

так, что вы нацелены на наложение вместо коробки.

источник

2013-06-27 09:13:53 Niklas

Щелкните в любом месте страницы, чтобы закрыть div

ответ

Смежные вопросы