2011-07-28 76 views
0

我之前曾問過一個問題,就是在嘗試使用this questions's answer by Jason Striegel中給出的背景疊加層後,如果用戶在其外部的任何位置點擊時如何使框關閉。但它沒有奏效,也沒有收到太多的關注。我現在試圖從Aaron Ray給出的另一個答案中解決問題。他建議 checkExternalClick。我已經設置好了,但是現在箱子關閉,只要我點擊裏面的箱子,而不是任何地方!checkExternalClick與我想要做的事情相反嗎?

JS:

$(document).ready(function(){ 
    initHUDWindow(); 
}); 

function initHUDWindow() 
{ 
    $(document).mousedown(checkExternalClick); 
} 

function checkExternalClick(event) 
{ 
    var target = $(event.target); 
    if(target[0].id != "box") 
    {   
     hideBox(); 
    } 
} 

function hideBox() 
{ 
    $(".BoxContainer").hide(); 
} 

CSS:

.Box 
{ 
position:absolute; 
top:15%; 
left:15%; 
width:500px; 
height:600px; 
background-repeat:no-repeat; 
z-index:2; 
} 


.BoxContainer 
{ 
background-image:url('images/box.png'); 
z-index:2; 
} 

HTML:

<div id = "box"> 
    <div class = "Box BoxContainer"></div> 
</div> 

正如我所說的,這將關閉對話框時,箱內用戶點擊。可是等等!如果他們在外面點擊,我認爲它應該關閉盒子?

回答

1

試試這個

$(document).ready(function(){ 
    initHUDWindow(); 

    $("#box").click(function(e){ 
     e.stopPropagation(); 
    }); 

}); 

function initHUDWindow() 
{ 
    $(document).click(checkExternalClick); 
} 

function checkExternalClick(event) 
{ 
    hideBox(); 
} 

function hideBox() 
{ 
    $(".BoxContainer").hide(); 
} 
+0

爲了記錄,雖然我的回答修復了張貼的方法,但這通常是我更喜歡的方式。儘管我沒有理由檢查該框是否已經可見。 –

+0

@kingjiv - 爲什麼找到容器並隱藏,如果它已經隱藏? – ShankarSangoli

+0

如果首先檢查效率更高,我希望jquery會在'hide'(也許已經有)中添加檢查。檢查它是否隱藏,因爲它只是調用「隱藏」可能同樣耗時。實際上,由於所需時間可以忽略不計,所以代碼在沒有檢查的情況下是更清潔的。不傷害,但。 –

1

我不確定這是否是總體上最好的方法,但問題在於元素內的元素沒有該ID。我認爲這會修復它(未經測試):

function checkExternalClick(event) 
{ 
    var target = $(event.target); 
    if(target[0].id != "box" && target.closest("#box").length === 0) 
    {   
     hideBox(); 
    } 
} 

這應該檢查你沒有點擊元素或其中的任何元素。

+0

我沒有在我的CSS明確定義一個#box元素。唯一的地方就是使用它在HTML中,當我把盒子的ID ID圍繞兩個類Box和BoxContainer。我不知道你是否看到過。我發現如果在包含單獨元素的某個其他區域中單擊(並且仍在框中),則該框將關閉,但此答案至少沒有破壞功能 – Briz

+0

我不確定爲什麼css會涉及這裏。無論是否爲其定義了css,javascript都可以訪問元素。 –

+1

創建測試以確保它看起來工作正常。 http://jsfiddle.net/JG5s4/ –

相關問題