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

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

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

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

Самые жестокие люди в истории мира


Самые глубокие места в мире


Часовая башня выборга. Белая башня.


Какой ад творился в Сталинграде во время войны? Сталинград это Русский Нагасаки


Делаем индикатор загрузки (progress bar)на css,js,html.


Самые жестокие люди в истории мира


Почему гулять одному и без друзей грустно?


подборка смешных мемов, демотиваторов, картинок


Иллюзии цвета. Обман зрения.


Бани (термы) Антонина. Тунис. Карфаген. Римские бани.


Кнопка "открыть текст", которая скрывает часть текста, а после нажатия открывает.



“ Знание — сила (Бэкон). Иногда — нечистая сила.”

дед Мазай

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

Это факт!


В Бразилии есть дерево под названием *молочная соска*. Достаточно ткнуть кончиком ножа ствол, и из коры потечет растительное *молоко*. За один раз дерево дает до 4 л молока, которое перед употреблением нужно только разбавить водой и вскипятить.

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

Ра оставил тебе послание!... (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! Спасибо за прочтение!
Всем веселья и добра! :)