Modal專注於div元素

Question

你們可能知道jQuery對話框模式選項（示例：http://jqueryui.com/dialog/#modal-confirmation）。

我想做類似的事情，但不是在彈出窗口中。我想把重點放在我的網站的一部分給用戶，如果他按下按鈕，這個焦點就會消失。

如果你把這個演示：http://jsfiddle.net/qwfVk/1/

<div id="box1" style="background-color:red"> 
    Content 
</div> 

<div id="box2" style="background-color:green"> 
    Content 
</div> 

<div id="box3" style="background-color:blue"> 
    Content 
</div> 

我想的頁面有重點的綠色部分和其他一切將是灰色的。與模態對話一樣的灰色。在我的網站上，用戶點擊一個按鈕，灰色的「模態」就會消失。無需阻止用戶左鍵點擊焦點，我只看到視覺效果。

jQuery中有隱藏的函數，我不知道？

Answer 1

您可以在CSS中使用焦點和/或目標。 DEMO

關注焦點，能成爲漁獲div，需要通過tabindex屬性要被模仿： 例如：

<p> 
click here 
<a href="#box1">box1</a> 
<a href="#box2">box2</a> 
<a href="#box1">box3</a> 
or onto the box: 
</p> 
<div id="box1" tabindex="0" style="background-color:#ff0000;padding:4px;border-radius:5px;">text.<a href="#none">close</a></div> 
<br /> 
<div id="box2" tabindex="0" style="background-color:#00ff00;padding:4px;border-radius:5px;">text.<a href="#none">close</a></div> 
<br /> 
<div id="box3" tabindex="0" style="background-color:#00aaff;padding:4px;border-radius:5px;">text.<a href="#none">close</a></div> 

和基本的CSS：

div:target, div:focus { 
    position:relative; 
    box-shadow:0 0 0 5000px rgba(0, 0, 0, 0.75); 
} 
a { 
    position:relative; 
    z-index:1; 
    background:white 
}