×

Вокруг мира факты и мирКрымтурцияПетербург и окрестноститунисВыборгСтрашное и мистическоеТайны историипро сссрПоследние новостиОбщество, мир
Интересно Музыкауроки по html,css,js,phpАнекдотыМистика и Гадания
Исскуство и поэзия Стихи Золотого векаЯпонские стихи и прозаПритчиСтихи Серебренного векаМифы и Легенды древнего мираБасни
Разные эпохи про сссрСредневековьеСказки народов мираТайны историиДревняя Азия
Разное РаскраскиСтрашное и мистическоеОригамиКонвертерыКомедия "Дино и его друзья"
общество и мир ПсихологияПоследние новостиАфоризмы и цитатыфакты и мирОбщество, мир

-----------

Вашему сайту нужна помощь? Политика конфидициальности Разместить рекламу

Модальное окно на 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…. и т.д. Название каждой новой ссылки с модальным окном должны быть уникальными!!!




Комментарии

Комментариев пока нет. Оставь тут свой комментарий или анекдот!


Комментарии к посту






 А помните, как мы жили при татарском иге? Вы помните, как мы жили при иге? Трудности, конечно, всякие строгости, не без этого. Но тогда мы, по крайней мере, знали, в какую обращаться инстанцию.

Смешной афоризм


Norway
Самой большой прозрачностью обладает море Уэдделла, у берегов Антарктиды – 79 м.

[ Интересные факты о мире ]






Данные не загружаются (импортируются) в базу данных или импортируются долго. Что делать?
как найти и заменить слово в столбце mysql?
Страшное и мистическое Тайны истории тунис Выборг Последние новости Петербург и окрестности Крым про ссср турция факты и мир Общество, мир






×

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