我玩弄建設一個基本的模態窗口，我希望它消失時，我點擊邊緣。所以我的問題是最基本的形式：Onclick，只有父div沒有細分

<div style="width:100%;height:100%;" onclick="hideAll()"> 
    Hide all onclick. 
    <div style="width:100px;height:100px;"> 
     does not hide all onclick 
    </div> 
</div>

什麼是最好的方式來實現這一目標？要使用unnested div？ html/css魔法？

來源

2014-03-06 SverkerSbrg

'hideAll（）'你爲什麼沒有發佈這個js函數？和onobtrusive JavaScript應該使用和最喜歡的方式。 – Jai

_html/css magic？_你是什麼意思？ – Jai

當你隱藏父標籤，它會自動隱藏童裝標籤以及，您應該首先將子div包含到變量中，然後隱藏父div並將存儲的子div附加到父標記中，如下所示。

HTML

<div id="result"> 
    <div style="width:100%;height:100%;" id="parentDiv" onclick="hideAll()"> 
     Hide all onclick. 
     <div style="width:100px;height:100px;" id="childDiv"> 
      does not hide all onclick 
     </div> 
    </div> 
</div>

的javaScript

function hideAll(){ 
    var childDiv = document.getElementById('childDiv'); //contain child div 
    var parDiv = document.getElementById('parentDiv'); 
    parDiv.style.display = 'none'; //hide parent div 
    parDiv.parentNode.appendChild(childDiv); //append child div 
}

DEMO

來源

2014-03-06 14:05:10

看到這個小提琴：

http://jsfiddle.net/eZp9D/

$(document).ready(function() { 
    $('#parentDiv').click(function (e) { 
     if ($(e.target).prop('id') == "parentDiv") { 
      $(this).hide(); 
     } 
    }); 
});

來源

2014-03-06 13:58:08

我加了id到Div的btw。 –

嗯....但它隱藏了一切。 – Jai

是的，父母會隱藏所有的，孩子不會......等等你是說你只想隱藏父母而不是孩子？如果是這樣，這是一個不同的問題。 –

您可以使用基本的jQuery和相應的風格它的CSS。檢查this example。

如果你想擁有它通過點擊對話窗口外的消失，確保的onClick您執行此操作：

$("#dialog_id").dialog("close");

來源

2014-03-06 13:58:22 XNull

HTML：

<div style="width:100%;height:100%;" class="outerModal"> 
    Hide all onclick. 
    <div style="width:100px;height:100px;"> 
     does not hide all onclick 
    </div> 
</div>

的JavaScript：

$(document).on("click", ".outerModal", function(evt) { //listen for clicks 
    var target = $(evt.target ||evt.srcElement); //get the element that was clicked on 
    if (target.is(".outerModal")) { //make sure it was not a child that was clicked. 
     //hide dialog 
    } 
});

實施例：

JSFiddle

來源

2014-03-06 14:16:27 epascarello

假設「parentDiv」是爲背景和「childDiv」是爲實際模態內容，我發現的最好方法是完全分開divs。

HTML使用jQuery

function hideAll(){ 
    /* The Parent Div will hide everything when clicked, but the child won't */ 
    $('#childDiv').fadeOut(1000, function(){ 
     $('#parentDiv').fadeOut(1000); 
    }); 
}

CSS

#parentDiv { 
    background: black; 
    display: block; 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 100; 
    height: 100%; 
    width: 100%; 
} 

#childDiv { 
    display: block; 
    position: relative; 
    background: white; 
    height: 200px; 
    width: 200px; 
    z-index: 101 
}

Here is a working example.

希望這有助於在所有

<div id="parentDiv" onclick="hideAll()">&nbsp;</div> 
<div id="childDiv" > 
    does not hide all onclick 
</div>

的JavaScript。

來源

2014-03-06 14:51:24 SalfordCC

Onclick，只有父div沒有細分

回答

Here is a working example.

相關問題