Я создаю систему, чтобы пройти пользователей через веб-сайт.Чтобы избежать ошибок и сосредоточить внимание пользователя, я бы хотел затемнить все на странице, кроме того, с чем я хочу, чтобы они взаимодействовали.Я также хотел бы сделать это на месте (не во всплывающем окне).
Способ, которым я подошел к этому, состоял в том, чтобы добавить div
к body
и установить его стиль:
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background-color: #000;
opacity: 0.5;
-ms-filter:'alpha(opacity=50)';
filter: alpha(opacity=50)
z-index: 1000
Затем я установил z-index
элемента, который я хотел выделить / лайтбокс, выше, чем у добавленного div
.В этом случае я установил значение 1001
.Для моего основного варианта использования я хотел выделить form
.Проблема с этим заключалась в том, что только отдельные флажки и другие поля стали незаштрихованными и кликабельными.Коробка с формой была еще темной.Можно ли как-нибудь выделить весь элемент, включая фон, для выделения?