Закрыть всплывающее окно при нажатии на внешнюю сторону

Question

У меня есть всплывающее окно, которое отображается только при нажатии на определенную кнопку. Он даже скрывается при нажатии на ту же кнопку. Моя проблема в том, что я также хочу скрыть div, когда вы щелкнули где-нибудь снаружи. Я не могу этого сделать, потому что popup div находится внутри основного класса-оболочки и не может этого сделать, используя событие click в классе-оболочке и скрывая его. Это мой код:

function showHide() { 
    var ele = document.getElementById("div_fieldWorkers"); 

    if (ele.style.display == "block") {   
     ele.style.display = "none"; 
    } else { 
     ele.style.display = "block";  
    } 
} 

<input type="button" value="Add Field Worker" id="btnFieldWorkers" onclick="return showHide();" class="btn btn-primary" /> 

Answer 1

Проверьте это: http://jsfiddle.net/d4SsZ/1/

После доработки: http://jsfiddle.net/d4SsZ/3/

Просто сниппет: Validate для нулевых и неопределенных JS ошибки, если таковые имеются.

Markup:

<div id="div_fieldWorkers" class="form_size" style='display:none;' class='noclick'><span class='noclick'>Hello How are you?</span></div> 
<input 
    type="button" 
    value="Add Field Worker" 
    id="btnFieldWorkers" 
    class="btn btn-primary" /> 

Javascript:

$('#btnFieldWorkers').bind("click", ToggleDisplay); 

function ToggleDisplay() { 
    if ($("#div_fieldWorkers").data('shown')) 
     hide(); 
    else 
     display(); 
} 

function display() {  
    if ($("#div_fieldWorkers").children().length > 0) { 
     $("#div_fieldWorkers").fadeIn(500, function() { 
      $(document).bind("click", function() {hide(); });    
      $("#div_fieldWorkers").data('shown', true)});   
    } 
} 

function hide() { 
    if (window.event.toElement.className != 'noclick') { 
     $("#div_fieldWorkers").fadeOut(500, function() { 
      $(document).unbind("click"); 
      $("#div_fieldWorkers").data('shown', false);     
     }); 
    } 
} 

Answer 2

Решение этой проблемы здесь: Use jQuery to hide a DIV when the user clicks outside of it

Кроме того, вы помечено этот вопрос Jquery, но ваш код чистый JavaScript. При использовании JQuery, вы можете написать только

$('#div_fieldWorkers').toggle(); 

в вашем OnClick.

Answer 3

Создать событие click на элементе body и stopPropagation. это позволяет событию вызывать событие click только на кнопке. Затем проверьте, что целевой элемент клика не является всплывающим div. Пример:

$(function(){ 
    $("#btnFieldWorkers").click(function(e){  
     e.stopPropagation(); 
     $("#div_fieldWorkers").show(); 
     $("body").click(function(e){ 
      if(e.target.id != "div_fieldWorkers") 
      { 
       $("#div_fieldWorkers").hide(); 
       $("body").unbind("click"); 
      } 
     }); 
    }); 

}); 

jsfiddle

Answer 4

была такая же проблема, пришел с этим простым решением. Он даже работает рекурсивным:

$(document).mouseup(function (e) 
{ 

var container = $("YOUR CONTAINER SELECTOR"); 

if (!container.is(e.target) // if the target of the click isn't the container... 
    && container.has(e.target).length === 0) // ... nor a descendant of the container 
{ 
    container.hide(); 
} 
}); 

Answer 5

Вы также можете скрыть всплывающий щелчком на всплывающем div.For этого вы должны предоставить функцию щелчка в DIV tag.In этой функции мыши вы должны написать близко поп .