Всплывающее модальное окно на HTML и CSS
 | |
| Больше замечаем, что теперь обратная связь становится на модальное окно. Так как так и красивей и намного удобней, и не только этот код можно установить. Здесь очередное окно, только уже в оригинальном дизайн, так как можно заметить по всем сторонам у него идет каемка, что смотрится стильно. Но и сама кнопка здесь прозрачна, что сразу заметна и немного больше стандартной. Но думаю здесь главный плюс, это сам код и под него стиля, в стилях мы делаем какой нужно размер. В самом коде пропишем или правила и поставим на ссылку, чтоб можно было нажать и оно плавно появилась, но и затемнение здесь также присутствует.Но также вы можете посмотреть это модальное окно, сделано также на чистом CSS и по установки все делаем как на этом. Просто там немного другой вид, который по своим свойствам не чем не отличается от этого материала. Код каркаса, ставим там, где будет кнопка или надпись, как вам угодно, но и там же устанавливать к примеру картинки или пишем что нужно. Код <a href="#login_form" id="login_pop">Открыть окно</a> <!-- popup форма --> <a href="#x" class="overlay" id="login_form"></a> <div class="popup"> Место под описание что будет в окне <a class="close" href="#close"></a> </div> Но остается CSS: Код .overlay { background-color: rgba(0, 0, 0, 0.6); bottom: 0; cursor: default; left: 0; opacity: 0; position: fixed; right: 0; top: 0; visibility: hidden; z-index: 1; -webkit-transition: opacity .5s; -moz-transition: opacity .5s; -ms-transition: opacity .5s; -o-transition: opacity .5s; transition: opacity .5s; } .overlay:target { visibility: visible; opacity: 1; } .popup { background-color: #fff; border: 3px solid #fff; display: inline-block; left: 50%; opacity: 0; padding: 15px; position: fixed; text-align: justify; top: 40%; visibility: hidden; z-index: 10; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset; -moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset; -ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset; -o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset; box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset; -webkit-transition: opacity .5s, top .5s; -moz-transition: opacity .5s, top .5s; -ms-transition: opacity .5s, top .5s; -o-transition: opacity .5s, top .5s; transition: opacity .5s, top .5s; } .overlay:target+.popup { top: 50%; opacity: 1; visibility: visible; } .close { background-color: rgba(0, 0, 0, 0.8); height: 30px; line-height: 30px; position: absolute; right: 0; text-align: center; text-decoration: none; top: -15px; width: 30px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; } .close:before { color: rgba(255, 255, 255, 0.9); content: "X"; font-size: 24px; text-shadow: 0 -1px rgba(0, 0, 0, 0.9); } .close:hover { background-color: rgba(64, 128, 128, 0.8); } Вот теперь все, можно ставить, красиво будет на светлом сайте. Источник: Bloggood.ru | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 5 | |
|
| |
