CSS3 дает разработчикам возможность добавлять некоторые дополнительные функции, которые когда-то были возможны только с помощью JavaScript. Вы можете достичь те же самые эффекты, используя только CSS3. Вы также можете создать анимацию, используя CSS переходы, а не JavaScript. Вы даже можете создать кнопку, чтобы открыть и закрыть модальное окно, используя только CSS3 псевдо-селектор “:target”.
“:target” действует так же, как другие псевдо-селекторы действовать такие как “:active” и “:hover”. Когда пользователь наводит курсор на элемент, стили, которые установлены для этого элемента “:hover” будет активирован. “:target” будет активирован для элемента, когда браузер нацелен этот элемент, как правило, с хэш-тега. Например, наш модальный элемент имеет на нем идентификатор “modal”, так что целевое состояние будет срабатывать, когда у браузера будет активирован хэш-тег “#mymodal”. Это то, как мы активируем нашу модальное окно.
HTML:
1 | <a href="#mymodal">window</a> /* Кнопка вызова модального окна */ |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | #mymodal { background:#fff; color:#000; margin:0; position:fixed; top:-50%; left:50%; transform:translate(-50%,-50%); width:80%; border-radius:5px; box-shadow:0 3px 7px rgba(0,0,0,.25); -moz-box-shadow:0 3px 7px rgba(0,0,0,.25); -webkit-box-shadow:0 3px 7px rgba(0,0,0,.25); box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } /* Делаем появление модального окна при нажатии на ссылку с href="#mymodal" */ #mymodal:target { top:50%; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; z-index: 9; box-shadow: 0 0 100px 25vw rgb(0 0 0 / 15%); } #mymodal header,#mymodal footer { background:#f7f7f7; border-bottom: 1px solid #e7e7e7; border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; } #mymodal footer { border:none; border-top: 1px solid #e7e7e7; border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; text-align:right; } #mymodal section,#mymodal header, #mymodal footer { padding:15px; z-index:200; } #mymodal h2 { margin:0; } |
Остается только вопрос а как этим модальным окном перекрыть вообще все, что отображается на текущей странице.
поместить модельное окно в блок с фиксированной позицией, пример:
Модальное окно
и прописать :target уже для #overlay
Мы определяем ширину модального окна и положение на странице. Также определяем градиент для фона и скругленные углы.