Jump to content

Impress

Neophyte
  • Posts

    1
  • Joined

  • Last visited

Impress's Achievements

Explorer

Explorer (1/14)

0

Reputation

  1. Доброго времени суток всем! Возникла такая проблема. Создаю форму авторизации в виде модального окна. Хочу сделать так, чтобы когда появлялась форма, то остальной фон затемнялся. Для затемнения использую div-блок с position: fixed; c прозрачностью, меньшей единицы и z-index'ом равным 100. У самого модального окна я поставил z-index: 200, надеясь, что он унаследуется всеми вложенными div-ами, из которых я собирал модальное окно и все они будут лежать "выше" затемнения, значит не будут "затемняться". Но это не помогло. Часть составных блоков формы затемнилась, часть - осталось светлыми. Скриншоты проблемы: http://hipics.ru/image/wjJ-- форма без затемнения http://hipics.ru/image/wjf-- форма с затемнением(затемнение "залазит" один из внутренних блоков формы, что смотрится некрасиво. Код верстки: https://jsfiddle.net/gn1fzktu/1/ Будьте добры, подскажите пожалуйста в чём мои ошибки, наставьте на путь истинный! CSS-код блоков, из которых состоит форма-окно: #div_form {display: none;border-radius: 10px 10px 10px 10px;margin: auto;margin-top: auto;width: 400px;height: 232px;position: fixed;top: 50%;left: 50%; margin-top: -110px; ; box-shadow: 0 0 15px 3px #000; z-index: 200;}#div_header { //border: 1px solid black; height: 20px; border-radius: 10px 10px 0px 0px; background: linear-gradient(to top, #aaa, #fff); padding: 5px; text-align: center; z-index: 200;}#div_body { border: 1px solid black; height: 200px; border-radius: 0px 0px 10px 10px; background: #000; opacity: 0.5; z-index: 200;}#content{ position: relative; top: -190px; left: 10px; z-index: 200;}CSS-код блока для затемнения: #TB_overlay { display: none; //opacity: 0.8; position: fixed; left: 0; right: 0; top: 0; bottom: 0; padding: 16px; background-color: rgba(1, 1, 1, 0.8); z-index: 100; overflow: auto; }
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy