當單擊外部時關閉彈出div

我有一個彈出div只顯示當點擊特定按鈕時。它甚至隱藏在同一個按鈕上時點擊。我的問題是，我也想在外面任何地方點擊時隱藏div。我無法這樣做，因爲popup div在主包裝類中，並且無法使用包裝類上的click事件並隱藏它。這是我的代碼：當單擊外部時關閉彈出div

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" />

來源

2013-09-30 Manu

向我們顯示您的標記 –

也爲彈出窗口添加html代碼和js代碼。 –

你也可以分享你的標記嗎？ – Neikos

檢查了這一點：http://jsfiddle.net/d4SsZ/1/

修訂：http://jsfiddle.net/d4SsZ/3/

只是一個片段：驗證爲null和undefined JS錯誤，如果有的話。

標記：

<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);     
     }); 
    } 
}

來源

2013-09-30 11:21:27

哇..它的工作.. Thanx很多.. :) – Manu

當我點擊裏面的div ..它被隱藏..我想如果用戶點擊裏面的..它不會隱藏自己 – Manu

@ user2829939檢查此http://jsfiddle.net/d4SsZ/3/剛添加的類作爲noclick和onhide跳過了單擊事件。可能有比這更好的方法。暫時：它會爲你工作。 –

，要解決這個問題是在這裏： Use jQuery to hide a DIV when the user clicks outside of it

此外，您標記這個問題jQuery的，但你的代碼是純JavaScript。當使用jQuery，你可以只寫

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

在的onclick。

來源

2013-09-30 11:06:13 lort

是的..但它不適用於此代碼。問題是popup div在主包裝類中。每當我點擊div之外的點擊事件（即封裝類）來隱藏它時，它根本不起作用。它優先於包裝類的單擊事件，因此div始終保持隱藏狀態。 – Manu

在body元素和stopPropagation上創建點擊事件。這會使事件僅在按鈕上調用click事件。然後檢查點擊目標元素是不是彈出格。例如：

$(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

來源

2013-09-30 11:06:16 Dvir

當我點擊裏面的div ..它被隱藏..我想要如果用戶點擊裏面..它不會隱藏自己，因爲它包含一個表格，由用戶填寫 – Manu

請參閱jsFiddle鏈接。它不應該消失。讓我看看你的代碼 – Dvir

有同樣的問題，用這種簡單的解決方案上來。它甚至工作遞歸：

$(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(); 
} 
});

來源

2015-06-25 05:04:13

-1

您還可以隱藏彈出通過點擊彈出div.For這一點，你必須提供點擊功能在div tag.In即點擊功能，你必須寫密切流行up功能。

來源

2015-07-15 13:05:31 user5119520

OP沒有明確說明這不是一個理想的解決方案嗎？ –

當單擊外部時關閉彈出div

回答

相關問題