Навигация
Список доступных категорий сайта.
Статистика
Краткая статистика сайта.
Всего
Пользователей
Гостей
Комментарии
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