模態專注於div元素

Question

你們可能都知道jQuery Dialog模式選項（示例： 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
}