Модальная фокусировка на элементе div

Question

Модальная фокусировка на элементе div

0

Вы, наверное, знаете о модальном варианте 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, о которой я не знаю?

Etdashou 05 май 2014, в 20:53

Источник

2

что-то вроде этого ? jsfiddle.net/qwfVk/2 или jsfiddle.net/qwfVk/3 .. с кнопкой закрытия jsfiddle.net/qwfVk/4
G-Cyr 05 май 2014, в 18:16

Теги:

javascript

jquery

html

css

jquery-ui

1 ответ

Ещё вопросы

что-то вроде этого ? jsfiddle.net/qwfVk/2 или jsfiddle.net/qwfVk/3 .. с кнопкой закрытия jsfiddle.net/qwfVk/4

G-Cyr · Accepted Answer · 2014-05-05T16-42-00.000Z

В CSS можно использовать фокус и/или цель. DEMO

Фокус, чтобы быть уловкой div, должен быть эмулирован с помощью атрибута tabindex: example:

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

Позиция стиля CSS: относительная; box-shadow: 0 0 0 5000px rgba (0, 0, 0, 0.75); полностью ответь на мой вопрос. Теперь я могу играть с этим :). Однако вы должны обновить демо, потому что ваша ссылка box3 указывает на id = "box1" вместо id = "box3".