Модальное окно CSS
Оп-па.
Вот и первый пример модального окна. Здесь можно разместить любой текст, изображение и ссылку.
Теперь можно его закрыть и просмотреть код с комментариями.
Здравствуйте уважаемые вебмастера.
Хочу показать вариант модального окна сделанного без скриптов и внешних библиотек.
А так же два появляющихся окна, которые можно использовать для размещения информации.
Так как языки html и csss активно развиваются, появляются новые теги и свойства, то и возможности их возрастают.
Правда не всё пока получается так как хочется, поэтому в отношении некоторых случаев, буду очень благодарен за уточнения.
Вот, например, в первом примере мне так и не удалось спрятать кнопку «Закрыть», после закрытия модального окна.
Окно появляется только при заходе на страницу. После закрытия больше не появляется даже при обновлении.
Окно адаптивное и спозиционировано по центру экрана.
CSS
/* Затемнение экрана */
.tele position : fixed ;
top : 0 ; /* Растягиваем по краям экрана */
right : 0 ;
bottom : 0 ;
left : 0 ;
background : rgba(0,0,0,0.2) ; /* Затемнение */
z-index : 99999 ; /* Поверх всех слоёв */
pointer-events : none ; /* Запрет мыши */
display : block ;
animation : main-titl 3s linear ; /* Плавное появление */
>
/* Применяем к идентификатору */
.tele :target display : none ;
pointer-events : auto ; /* Восстанавливаем мышь */
>
/* Окно */
.modal width : 25% ;
position : fixed ;
top : 30% ;
left : 30% ;
right : 30% ;
padding : 10px ;
pointer-events : auto ; /* Восстанавливаем доступ к ссылкам */
text-align : center ;
line-height : 25px ;
border-radius : 3px ;
background : #fff ;
box-shadow : 1px 2px 3px rgba(0, 0, 0, 0.4) ,
-1px 0 2px rgba(0, 0, 0, 0.4) ;
>
/* Кнопка Закрыть */
.alles position : absolute ;
top : 5px ;
right : 5px ;
width : 30px ;
background : #FFF ;
color : #888 ;
line-height : 18px ;
text-align : center ;
text-decoration : none ;
font-family : Arial ;
border : 2px colid #FF5037 ;
border-radius : 2px ;
animation : main-close 3s linear ; /* Кнопка появляется вместе с затемнением */
>
.alles:hover background : #FF5037 ;
>
.alles:active background : rgba(0, 0, 0, 0.01) ;
>
.alles:visited background : #fff ;
>
@keyframes main-titl 0% transform : translateY(6em) ;
opacity : 0 ;
>
95% opacity : 0 ;
>
100% transform : translateY(0) ;
opacity : 1 ;
>
>
@keyframes main-close 0% transform : translateY(6em) ;
opacity : 0 ;
>
95% opacity : 0 ;
>
100% transform : translateY(0) ;
opacity : 1 ;
>
>
Второе окно проще первого. Его функция — напомнить или предупредить посетителя о чём нибудь.
Окно появляется через определённые промежутки времени на несколько секунд и опять исчезает.
.reminder position : fixed ;
top : 25px ;
right : 20px ;
width : 200px ;
padding : 10px ;
border : 1px solid #999 ;
text-align : center ;
font-size : 20px ;
font-style : italic ;
color : rgb(95, 123, 111) ;
background : radial-gradient(#fff 70%, rgba(0, 0, 0, 0.07)) ;
border-radius : 5px ;
box-shadow : 1px 2px 3px rgba(0, 0, 0, 0.4) ,
-1px 0 2px rgba(0, 0, 0, 0.4) ;
opacity : 0 ;
animation : nev 25s infinite ;
>
@keyframes nev 0% opacity : 0 ;
>
70% opacity : 0 ;
>
80% opacity : 1 ;
>
95% opacity : 1 ;
>
100% opacity : 0 ;
>
>
Это окно можно назвать окном с подсказкой или дополнительной информацией.
Опция очень удобна тем, что в любом месте контента можно вставить вот такую кнопочку ? Текст подсказки , и при наведении на неё курсора, откроется окно с подсказкой.
Код очень простой, даже комментировать нечего.
CSS
. quest text-align : center ;
font-weight : bold ;
font-size : 18px ;
padding : 0 5px ;
color : #800000 ;
cursor : pointer ;
border : 1px solid #888 ;
border-radius : 2px ;
position : relative ;
>
. hint position : absolute ;
top : -110px ;
left : 40px ;
width : 100px ;
padding : 30px ;
display : none ;
text-align : center ;
font-weight : normal ;
font-size : 16px ;
color : #666 ;
background: #fff ;
border-radius : 3px ;
box-shadow : inset 0 0 2px 1px #888 ;
>
. quest:hover background : #FFA07A ;
>
. quest:hover .hint display : block ;
>
Модальное окно на CSS + JS
Каждый начинающий веб-разработчик рано или поздно сталкивается с задачей, реализовать на сайте модальное окно (аналог pop-up окна).
Модальное окно полностью блокирует работу родительского сайта, пока пользователь не закроет данное окно. Как вы понимаете, что для навязывания такого действия, содержимое модального окна, должно представлять пользу для пользователя.
Желательно отказаться от автоматически всплывающего модального окна, а предоставить пользователю только кнопку, открывающую окно и хорошо видимый элемент (обычно это крестик), закрывающий окно. Этот способ, мы сегодня и реализуем в данной статье.
Демонстрация модального окна.
Мы сделаем адаптивное модальное окно без плагинов и библиотек, на чистом CSS+JS.
HTML разметка
Создадим кнопку, при клике на которую, будет открываться модальное окно.
Оболочка окна с затемнением, внутри которого, будет окно поменьше с содержимым. Затемнение самого сайта, подсказывает пользователю, что сначала следует заняться окном.
Содержимое модального окна, состоящее из хедера, тела и футера.
Шапка модального окна
Напишите здесь что-нибудь важное
Добавьте что-нибудь менее важное.
Футер
CSS код
Оформление полноэкранного фона модального окна.
.modal display: none; /* Скрыто по умолчанию */
background-color: rgb(0,0,0); /* Затемнение фона */
background-color: rgba(0,0,0,0.5); /* Полупрозрачное затемнение */
z-index: 1; /* Фон на нижнем слое */
overflow: auto; /* При необходимости, то появиться прокрутка */
>
Модальное окно с содержанием, к которому примениться анимация.
.modal-content animation-name: animate;
animation-duration: 0.5s
>
Добавим анимации для плавного скольжения сверху вниз и постепенного появления модального окна.
Стилизуем крестик (сущность ×), при клике по которому, модальное окно закроется.
.close font-size: 30px;
font-weight: bold;
>
JS код
Без JavaScript, не будет открываться и закрываться модальное окно. Получаем все нужные элементы, участвующие в процессе.
Получить модальное окно по ID.
var modal = document.getElementById(‘myModal’);
Получить кнопку, которая открывает модальное окно по ID.
var btn = document.getElementById(«myBtn»);
Получить тег span с классом close, который закрывает модальное окно.
var span = document.getElementsByClassName(«close»)[0];
Функции открыть / закрыть при клике.
Когда пользователь кликает по кнопке, модальное окно открывается – переходит из скрытного состояния в видимое.
btn.onclick = function() modal.style.display = «block»;
>
Когда пользователь кликает на крестик в теге span, модальное окно закрывается, наоборот переходит из видимого состояния в скрытное.
span.onclick = function() modal.style.display = «none»;
>
Когда пользователь кликает где-то за пределами модального окна, оно закрывается, становиться невидимым.
window.onclick = function(event) if (event.target == modal) modal.style.display = «none»;
>
>
Свободное владение языком JavaScript, делает создание web-страниц – не скучным процессом, вы можете сами в этом убедиться, посмотрев мой видеокурс «JavaScript, jQuery и Ajax с Нуля до Гуру».
На CodePen вы можете увидеть весь код модального окна на CSS+JS, который можно скачать и использовать в своих проекта.
Создано 21.11.2018 10:05:00
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Красивые всплывающие диалоговые окна.
Нельзя представить полноценные динамические страницы без красивых всплывающих окон — pop-up. Поэтому в этой статье мы рассмотрим несколько вариантов создания и появления pop-up на странице сайта. Не будем подробно останавливаться на том, что представляет из себя всплывающее окно. Со всей уверенность скажу, что вы неоднократно сталкивались с ними и знаете, что это такое.
Не будем ходить вокруг да около, а сразу приступим к делу — поставим задачу, что же мы хотим получить на выходе.
Итак, давайте создадим красивые всплывающие окна с эффектами анимации: fade и slide , которые будет применяться как к подложке (overlay), так и к самому окну. Для создания эффектов анимации будем использовать исключительно CSS3.
Также я уверен, что вам приходилось сталкиваться с ситуациями, когда на одной странице могли выводиться разные всплывающие окна, содержащие, соответственно, разную информацию. Такое часто встречается в лендингах, когда в одном pop-up содержится форма заказа, а в другом предлагают ввести данные для связи с вами. Давайте и мы с вами сделаем точно также.
Теперь настал черёд поговорить об управлении, которое мы сделаем для всплывающего окна.
- Открытие всплывающего окна. Один и тот же pop-up может открываться по клику на разные интерактивные элементы, расположенные в разных местах страницы.
- Закрытие всплывающего окна. Pop-up мы будем закрывать тремя способами:
— во-первых, стандартным способом, кликом по крестику в правом верхнем углу всплывающего окна;
— во-вторых, по клику на любое место экрана вне всплывающего окна, т. е., по оверлею, который перекрывает и затеняет контент страницы и, при этом, занимает всю площадь экрана, имея ширину и высоту равные 100%;
— в-третьих, клавишей Esc .
Итак, вроде со всем определились и давайте теперь перейдём к созданию непосредственно всплывающего окна.
HTML-разметка всплывающего окна.
Мы не будем создавать сложную вёрстку на HTML. Создадим overlay, два всплывающих окна и по две кнопки для каждого pop-up, которые их будут открывать. Вёрстка будет практически одинаковая для всех вариантов анимации открытия и закрытия всплывающих окон.
Начнём с интерактивных элементов — кнопок, которые будут открывать наши всплывающие окна:
Плавное появление модального окна с задержкой в N секунд
Ребят, помогите подправить код. Нужно чтобы модальное окно появлялось не сразу же после загрузки страницы, а спустя несколько секунд и плавно.
Вот код окна:
div >"list"> div> div >"overflow"> div> div >"popup" >"myPopup"> a href="#" >"close"> a> div >"popup_title">Модальное окно div> div>
var win_top = 0; $(document).ready(function()< // открываем модальное окно при клике по контенту $('#list').click(function()< popup_open('#myPopup'); >) // открываем модальное окно сразу при загрузки страницы popup_open('#myPopup'); // Добавляем обработчик закрытия модального окна $(document).on('click', '.popup .close, .overflow', function()< popup_close() return false; >) >) function popup_open(selector)< if (selector.length)< win_top = $(window).scrollTop(); $('#list').css(< 'position' : 'fixed', 'left' : '0', 'right' : '0', 'top' : '0', // Добавляем смещение, чтобы на фоне была именно та часть, что просмаривал пользователь 'margin-top': '-'+win_top+'px' >) $('.overflow,'+selector).fadeIn(); > > function popup_close()< $('.overflow, .popup').hide(); $('#list').css(< 'position' : 'static', 'margin-top': '0px' >) // Возвращаем скролл на место $(window).scrollTop(win_top); >
вместо popup_open( ‘#myPopup’ )
написать setTimeout( popup_open , 5000, ‘#myPopup’ ); а плавно и так должно быть. У вас там fadeIn() присутствует. Если он проявляется скачкообразно, надо смотреть ЦСС
Но если уж говорить серьезно так модальники делать уже не имеет смысла. Очень большая нагрузка на клиента и если у вас 10 модальников в очереди, то можно и клиента завесить. Ну и медленно всё работает, через jquery. Давно уже пора на ванильный джи эс переходить, а все манипуляции с окнами производить средствами цсс.