Модальное окно на CSS3 и HTML5 без использования JavaScript

Всем привет. Сегодня я вам покажу как сделать модальное окно для вашего сайта, которое будет появляться после нажатия на заданную ссылку. Данное модальное окно будет написано на CSS и HTML, без использования JavaScript и сторонних плагинов.

HTML

В HTML файле мы пишем следующий код.

<!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">    <title>Document</title>    <link rel="stylesheet" type="text/css" href="style.css"> </head> <body>    <div id="openModal" class="modal">        <div class="modal-dialog">        <div class="modal-content">        <div class="modal-header">        <h3 class="modal-title">Название</h3>        <a href="#close" title="Close" class="close">×</a>    </div>    <div class="modal-body">         <p>Содержимое модального окна...</p>    </div>    </div>    </div>    </div>    <a href="#openModal">Открыть модальное окно</a> </body> </html>

Внутри тега body мы пишем код самого окна и ссылку, при нажатии на которую будет появляться это окно. Здесь вы можете, в теге с классом close, указать символ при нажатии на который окно будет закрываться(в моем случае это крестик). В modal-title указываем название окна. В modal-body вы можете разместить любую информацию, которая должна быть показана в в этом окне.

После того как вы отредактировали окно вы можете добавить ссылку и в качестве ее атрибута href указать путь к блоку с формой.

CSS

/* стилизация содержимого страницы */
body {
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #292b2c;
background-color: #fff;
}

/* свойства модального окна по умолчанию */
.modal {
position: fixed; /* фиксированное положение */
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.5); /* цвет фона */
z-index: 1050;
opacity: 0; /* по умолчанию модальное окно прозрачно */
-webkit-transition: opacity 200ms ease-in;
-moz-transition: opacity 200ms ease-in;
transition: opacity 200ms ease-in; /* анимация перехода */
pointer-events: none; /* элемент невидим для событий мыши */
margin: 0;
padding: 0;
}
/* при отображении модального окно */
.modal:target {
opacity: 1; /* делаем окно видимым */
pointer-events: auto; /* элемент видим для событий мыши */
overflow-y: auto; /* добавляем прокрутку по y, когда элемент не помещается на страницу */
}
/* ширина модального окна и его отступы от экрана */
.modal-dialog {
position: relative;
width: auto;
margin: 10px;
}
@media (min-width: 576px) {
.modal-dialog {
max-width: 500px;
margin: 30px auto; /* для отображения модального окна по центру */
}
}
/* свойства для блока, содержащего контент модального окна */
.modal-content {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.2);
border-radius: .3rem;
outline: 0;
}
@media (min-width: 768px) {
.modal-content {
-webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
box-shadow: 0 5px 15px rgba(0,0,0,.5);
}
}
/* свойства для заголовка модального окна */
.modal-header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 15px;
border-bottom: 1px solid #eceeef;
}
.modal-title {
margin-top: 0;
margin-bottom: 0;
line-height: 1.5;
font-size: 1.25rem;
font-weight: 500;
}
/* свойства для кнопки "Закрыть" */
.close {
float: right;
font-family: sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
opacity: .5;
text-decoration: none;
}
/* свойства для кнопки "Закрыть" при нахождении её в фокусе или наведении */
.close:focus, .close:hover {
color: #000;
text-decoration: none;
cursor: pointer;
opacity: .75;
}
/* свойства для блока, содержащего основное содержимое окна */
.modal-body {
position: relative;
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 15px;
overflow: auto;
}
На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime

23
Оставить комментарий

avatar
23 Цепочка комментария
0 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
22 Авторы комментариев
AndrewCigAndrewCigMathewDaupsMathewDaupsBradleyAnync Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
JanleF
Гость

Viagra Online Bestellen Apotheke [url=http://apcialisle.com/#]Cialis[/url] Cheap Zentel Tablets In Australia Cialis Viagra Generico Italia Si Puo Avere

Bupbaipt
Гость
Bupbaipt

buy cialis canada cheap https://canadianpharmacystorm.com cialis black

Bupbaipt
Гость
Bupbaipt

buy viagra no prescription uk buy cialis generic viagra for men sale

Bupbaipt
Гость
Bupbaipt

viagra coupons click here cheap viagra sale online

JanleF
Гость

Doryx Apo [url=https://abcialisnews.com/#]where to buy cialis online[/url] Vardenafil Levitra Precio cialis generic online Buy Levothyroxine Online Without Script

Arturojep
Гость
Arturojep

buy viagra russia buy viagra online buy cialis online in u.k

JimmyGoori
Гость
JimmyGoori

cialis tablet yan etkileri https://edpillsphrm.com buy discount cialis

RaymondLem
Гость
RaymondLem

buy viagra for cheap https://www.sildwithdoctorprescription.com cialis mail order pharmacy

Harryraw
Гость
Harryraw

cheap legitimate cialis http://alexa24ph.com – viagra pills viagra over the counter

Harryraw
Гость
Harryraw

buy brand cialis online no prescription http://zithazi.com – zithromax price cheap levitra from canada

Harryraw
Гость
Harryraw

cheapest levitra http://tadal24ph.com – generic cialis buy levitra paypal

BradleyAnync
Гость
BradleyAnync

cialis 20 mg 4 tablet fiyat
generic viagra 100mg

BradleyAnync
Гость
BradleyAnync

can buy viagra rite aid
buy sildenafil

BradleyAnync
Гость
BradleyAnync

cialis cheap australia
sildenafil

BradleyAnync
Гость
BradleyAnync

can you buy viagra in thailand
viagra without a doctor prescription

BradleyAnync
Гость
BradleyAnync

cialis at a discount
generic viagra 100mg

BradleyAnync
Гость
BradleyAnync

cheap levitra 40 mg
sildenafil

BradleyAnync
Гость
BradleyAnync

where can i buy viagra online yahoo answers
viagra without a doctor prescription

BradleyAnync
Гость
BradleyAnync

generic levitra online cheap
sildenafil

MathewDaups
Гость
MathewDaups

cialis 5mg coupon
http://cialisxtl.com/ coupon for cialis by manufacturer

MathewDaups
Гость
MathewDaups

nose congested when taking cialis
http://cialisxtl.com/ generic cialis without prescription

AndrewCig
Гость
AndrewCig

side effects of viagra https://sildenafilprof.com
buy viagra birmingham

AndrewCig
Гость
AndrewCig

what helps viagra work better https://sildenafilprof.com
want buy cialis uk