jQuery скрыть, нажав вне div

Question

Здравствуйте,

Я пытаюсь сделать динамическое отображение изображения JavaScript.

Вот мой код:

<div class="info_image_click" style="display: none;"> 
    <img src="slike/info_slika_click.jpg" /> 
</div><!--kraj info_image_click--> 

<a href="javascript:void(null);"> 
    <div class="info_image" style="margin: 0px auto;"> 
     <img src="slike/info_slika.jpg"/> 
    </div> 
</a><!-- info slika --> 

<script> 
    $('.info_image').click(function() { 
     $('.info_image_click').show(); 
    }); 
</script> 

Когда кто-то нажимает на «info_image» (это маленькая картинка) она открывает «info_image_click» (это большая картина). Я не знаю, как пользователи могут скрыть «info_image_click», щелкнув внешний контейнер, в котором он находится. К сожалению о моем английском :)

Answer 1

Попробуйте это:

$('.info_image').click(function (e) { 

    // Used to stop the event bubbling.. 
    e.stopPropagation() 
    $('.info_image_click').show(); 
}); 

// Hide the "info_image_click" by clicking outside container 
$(document).click(function() { 
    $('.info_image_click').hide(); 
}); 

Answer 2

попробовать использовать

$(document).not('. info_image_click').click(function() { 
    // Do your hiding stuff here. 
}); 

Answer 3

Добавить тела нажмите:

<script> 
$('.info_image').click(function() { 
      $('.info_image_click').show(); 
      $("body").click(function() { 
       $("info_image_click').hide(); 
      }); 
     }); 
</script> 

Answer 4

Если можно попробовать изменить DOM, то нет необходимости в jQuery также

<a href="your large image"><img src="your small image"></a> 

Answer 5

Если вы пытаетесь сделать это, чтобы ваше изображение было модальным (т. страница ниже неактивна до тех пор, пока изображение не будет скрыто), вы можете создать невидимый оверлей (с очень малой непрозрачностью, обычно 0,01), который имеет одинаковый размер вашей страницы и покрывает его, и имеет индекс z (" вертикальной "позиции) между вашей страницей (которая обычно равна 0) и вашей« модальной »зоной (то есть в этом случае является изображением info_image_click), которая может быть чем-то большим, чем 0.

Затем вы устанавливаете событие наложения, так что изображение и наложение будут скрыты при нажатии на оверлей.

Посредством этого вы гарантируете, что когда пользователь нажимает на окно, если внутри его изображения нет ничего (так как изображение имеет более высокий z-индекс, он получит событие клика, которое не назначено), и если его внешний вид изображения, наложение (а не страница, так как оно имеет более низкий индекс z), получит событие click и сделает то, что вы хотите (скрыть изображение и наложение, вернувшись на главную страницу).

Вы можете наложить наложение на более высокую непрозрачность, чем 0,01, если вы хотите, чтобы это было ключом к пользователю, чтобы изображение было модальным.

Быстрый проект, как я хотел бы сделать это в JQuery: классы

showWindowModal: function(windowSelector) { 
    $("<div></div>") 
     .addClass("overlay") 
     .appendTo($("#main")) 
     .css({ 
      width: $("#main").outerWidth(), 
      height: $("#main").outerheight() 
     }) 
     .click(function() { 
      $(windowSelector).remove(); 
      $("#main > div.overlay").remove(); 
     }); 
    $(windowSelector).addClass("modal").show(); 
} 

Css:

#main > div.overlay 
{ 
    position: absolute; 
    background: white; 
    z-index: 100; 
    opacity: 0.5; 
    filter:alpha(opacity=50); /* For IE8 and earlier */ 
} 

.modal 
{ 
    z-index: 1000; 
}