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 
}