">

События в этот день
(даты, события, история)

Узнай про космос
(ввселенная, планеты, фазы луны)

Новые статьи:

"Деньги не пахнут" смысл цитаты и её история


Ресторан, построенный в туалете. Уникальные места СПб.


Какими были трамваи в Выборге? Выборг трамваи.


Защита сайта от СПАМА. проверка в форме.


В моей жизни всё плохо и безысходно.


нереализованный проект ссср. самый большой перекресток в мире. Площадь Конституции


Почему в Англии левостороннее движение?


притчи про поиск любови и счастья


фото нло, инопланетян настоящие фотографии, реальные фото


Тяжелые, самые сильные фотографии из жизни.


"Я бы вдул" Откуда пошло выражение?



“ Гунны всю жизнь проводили на лошадях. Они и спали на лошадях, и женились на лошадях, — не в том смысле, что женились на лошадях, а в том, что женились, не сходя с лошади. Вот откуда пошло выражение: солдат спит, служба идет.”

дед Мазай

Следующая цитата »

Это факт!


Самый татуированный прадед в мире – Томми Уэллс из Великобритании.

Следующий факт »

Ра оставил тебе послание!... (0о0)

Модальное окно на css. Что это такое и как сделать?


modal, css, html, без js, без использования java script, на чистом css, модальное окно, окно, диалоговое окно, блок, пример, скрипт, скачать, простое, красивое, диалог, как сделать, как создать,

На смену java script пришел css. Он более быстрее и способен создавать сложные анимации.
Раньше всплывающее окно с диалогом или текстом можно было создать только с помощью длинного кода js (java script), теперь же можно создать точно такое же окно, но уже более легкое с помощью css. Такое окно получило название - модальное.

В этой статье я покажу простой пример создания такого всплывающего окна на чистом css, без примесей js.
Создать его просто очень легко. Получившееся окно должно будет выглядеть так.

See the Pen abvZMBL by Lora Ug (@lora-ug)on CodePen.



Шаг 1. Нужно создать кнопку, которая будет открывать окно. Это будет обычная ссылка. В ссылке будет прописана ссылка #openModal. Эта ссылка будет вызвать блок с таким названием id. Заметьте, что название id должно быть уникальным.

<a href="#openModal"> &#9776; Жми меня</a>

Шаг 2.
Создадим сам блок с текстом, который будет вызывать ссылка. Заодно и создадим ссылку-кнопку "Закрыть", чтобы можно было закрыть блок при нажатии на эту кнопку в модальном окне.

<div id="openModal" class="modalDialog">
<div>
<a href="#close" title="Закрыть" class="close">X</a>
<p>а вот и текст. представьте, что тут много картинок и текста + какие-то статьи и т.д. ;)</p>
</div>
</div>


Шаг 3.
Теперь осталось прописать сам css код, который будет отвечать за открытие и закрытие модального окна.

.modalDialog
{overflow: auto;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.9);
z-index: 99999;
display: none;
pointer-events: none;
}

.modalDialog:target {
display: block;
pointer-events: auto;
}

.modalDialog > div {
background-color: #fff;
width: 80%;
padding: 10px 30px;
position: absolute;
left: 8%;
top: 5%;
border-radius: 10px;
z-index: 999;
pointer-events: auto;
cursor: auto;
}

.close {
color: white;
position: absolute;
right: 0px;
top: 0;
padding: 7px;
border-radius:0px 10px 0px 10px;
background:#da2632;
text-decoration:none;
font-size: 20px;
width: 45px;
height: 28px;
font-weight: bold;
text-align: center;
cursor: pointer;
}

.close:hover {
background: red;
}

Собственно, модальное окно готово, но я предлагаю приделать анимацию открытия модального окна. Оно будет выскакивать как мячик. Для этого добавьте свойство -webkit-animation: pulsing 1s ; и animation: pulsing 1s ; а затем добавьте саму анимацию transform + keyframes.
Это чисто для красоты. Об анимации я напишу в отдельной статье про анимацию в css

.modalDialog {overflow: auto;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.9);
z-index: 99999;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
display: none;
pointer-events: none;
}

.modalDialog > div {
background-color: #fff;
width: 80%;
padding: 10px 30px;
position: absolute;
left: 8%;
top: 5%;
border-radius: 10px;
z-index: 999;
pointer-events: auto;
cursor: auto;
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.6); -webkit-animation: pulsing 1s ;
animation: pulsing 1s ;
}

@-webkit-keyframes pulsing {
0% {
-webkit-transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5)
}
50% {
-webkit-transform: scale(1.0, 1.0);
transform: scale(1.0, 1.0);
}
100% {
-webkit-transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5);
}
}

@keyframes pulsing {
0% {
-webkit-transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5)
}
50% {
-webkit-transform: scale(1.0, 1.0);
transform: scale(1.0, 1.0);
}
}

вот и всё. Окно готово, вы можете изменять его кнопку для открытия окна, можете менять само окно. Развлекайтесь)
p.s. Если вы хотите создать второе такое же окно с ссылкой-кнопкой, то не забывайте поменять id ссылки-кнопки и id самого модального окна на openModal1,2,3…. и т.д. Название каждой новой ссылки с модальным окном должны быть уникальными!!!





ОТКРЫТЬ КОММЕНТАРИИ Закрыть комментарии




Введите ЛЮБОЕ число ЦИФРОЙ от НУЛЯ до ДЕСЯТИ (проверка на бота)



P.S. сайт и некоторые статьи и сказки (с ошибками, неполные) корректируются, дорабатываются и удаляются.
Желательно, чтобы вы добавили в комментарий, то что бы вы хотели бы исправить, удалить или наоборот добавить на портал (сайт) , такие комментарии читаются и обязательно учитываются добрым админом :). (например: "добавьте раздел поэзии", "исправьте ошибку на странице: (recsgames.ru/example44)", "добавьте функцию такую-то" и прочее).
С уважением, создатель портала. :)





Почитать интересные истории:




Сырно написано? Заложи страницу в закладки :)








×

Рассказы из категории: Создание сайта (html,css,php,js)



info:

Bonjour Mon'Amie! Спасибо за прочтение!
Всем веселья и добра! :)