Question

你们可能都知道jQuery Dialog模式选项（示例：http://jqueryui.com/dialog/#modal-confirmation）。

我想做类似的事情，但不是在弹出窗口中。我想把重点放在我的网站的一部分给用户，如果他按下按钮，这个焦点就会消失。

<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
}

模态专注于div元素

1 个答案: