Навигация
Список доступных категорий сайта.
Статистика
Краткая статистика сайта.
Всего
Пользователей
Гостей
Комментарии
5 последних комментариев.
Admіn 26.10.2021 в 01:14 прокомментировал: Lifebook – ноутбук, объединяющий все гаджеты Поиск по тегам
Облако популярных тегов.
Светлое модальное окно на CSS и HTML
Пожалуй на каждом сайте есть блоки, или елементы, которые редко используются. Зачастую в таких случая разумней всего перенести их на отдельную страницу и присвоить отдельную ссылку. Однако сегодня мы рассмотрим стильно решение, которе позволит красиво оформить любой текст, картинку, форму входа и все что вам только захочется в модальном окне. Все происходит без использования скриптов, по-этому обойдёмся без лишней нагрузки на сайт.
Установка
Первым делом в то место, где мы хотим видеть кнопку, которая будет открывать окно с содержимым, вставляем следующее:
Код
<a class="btn-modal" href="#open-window-content">Открыть окно</a>
<div class="modal-overlay" id="open-window-content">
<div class="open-window">
<h2>Заголовок модального окна</h2><a class="close" href="#">×</a>
<div class="modal-content-body">
<p>
Содержимое модельного окна
</p>
</div>
</div>
</div>
<div class="modal-overlay" id="open-window-content">
<div class="open-window">
<h2>Заголовок модального окна</h2><a class="close" href="#">×</a>
<div class="modal-content-body">
<p>
Содержимое модельного окна
</p>
</div>
</div>
</div>
Следующее, что мы делаем это подключаем стили:
Код
/* Кнопка */
.btn-modal {
fcolor: #fff;
cursor: pointer;
line-height: 3rem;
padding: 1rem 3rem;
color: #fff;
text-decoration: none;
background-color: #b60000;
transition: all 0.3s ease-out;
}
.btn-modal:hover {
background-color: #e43a3a;
}
/* Затемнение фона */
.modal-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.7);
transition: opacity 500ms;
visibility: hidden;
height: 100%;
opacity: 0;
}
.modal-overlay:target {
visibility: visible;
opacity: 1;
}
/* Модаальное окно */
.open-window {
margin: 70px auto;
padding: 2em;
background: #fff;
border-radius: 5px;
width: 40%;
position: relative;
transition: all 5s easeout;
}
.open-window h2 {
margin: 1em 0;
color: #333;
font-family: 'Raleway', sans-serif;
}
/* Кнопка закрыть */
.open-window .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.open-window .close:hover {
color: #83bec5;
}
.open-window .modal-content-body {
overflow: auto;
}
.modal-content-body p{
text-align: justify;
}
::-webkit-scrollbar {
z-index: 30;
width: 5px;
height: 0;
y-index: hidden;
}
::-webkit-scrollbar-track {
background-color: #111;
border-radius: 0;
}
::-webkit-scrollbar-thumb {
background-color: #2b2e33;
}
::-webkit-scrollbar-thumb:hover {
background-color: transparent;
}
.btn-modal {
fcolor: #fff;
cursor: pointer;
line-height: 3rem;
padding: 1rem 3rem;
color: #fff;
text-decoration: none;
background-color: #b60000;
transition: all 0.3s ease-out;
}
.btn-modal:hover {
background-color: #e43a3a;
}
/* Затемнение фона */
.modal-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.7);
transition: opacity 500ms;
visibility: hidden;
height: 100%;
opacity: 0;
}
.modal-overlay:target {
visibility: visible;
opacity: 1;
}
/* Модаальное окно */
.open-window {
margin: 70px auto;
padding: 2em;
background: #fff;
border-radius: 5px;
width: 40%;
position: relative;
transition: all 5s easeout;
}
.open-window h2 {
margin: 1em 0;
color: #333;
font-family: 'Raleway', sans-serif;
}
/* Кнопка закрыть */
.open-window .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.open-window .close:hover {
color: #83bec5;
}
.open-window .modal-content-body {
overflow: auto;
}
.modal-content-body p{
text-align: justify;
}
::-webkit-scrollbar {
z-index: 30;
width: 5px;
height: 0;
y-index: hidden;
}
::-webkit-scrollbar-track {
background-color: #111;
border-radius: 0;
}
::-webkit-scrollbar-thumb {
background-color: #2b2e33;
}
::-webkit-scrollbar-thumb:hover {
background-color: transparent;
}
Модальное окно по своей структуре очень простое, переделать его форму, или цвета под ваш дизайн не составит никакого труда.
Поделись с друзьями
Категория
Может быть интересно
Скрипты 
Простое решение, которое поможет быстро подняться вверх страницы.
Простое решение, которое поможет быстро подняться вверх страницы.
Скрипты 
Отличная, современная светлая форма поиска, которая раздвигается при нажатии на неё.
Отличная, современная светлая форма поиска, которая раздвигается при нажатии на неё.
Комментариев: 0