Модальные окна на CSS. Модальные всплывающие окна с помощью CSS3 без Javascript Создание модального окна в html

Привет всем, расскажу об одной очень удобной штуке, которая называется модальное окно, мы разберем, как сделать модальное окно? Многие не понимаю что это такое, я постараюсь объяснить на понятном для вас языке, другими словами — это всплывающее окно при нажатии на кнопку или текст.

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

Я недавно делал такое на одном сайте, вставлял картинку на главной, даже не картинку а скриншот из видео ютуба, и при нажатии всплывает окно где показывает видео. Пример такого окна можно увидеть у меня на странице с игрой, принцип такой же, жмешь на картинку всплывает окно с игрой. Сделал так по скольку расширение игры больше по ширине, чем у меня колонка для контента, вот такой выход из ситуации я нашел.

Рассмотрим модальное окно на css, чтоб не морочить голову, будем использовать стили, то-есть прописывает стили в основном файле и код в наше окно, рассмотрим все в подробностях, что и как.

Первое что нам нужно это стили, копируем полностью код со стилями, который ниже и вставляем его в ваш основной файл стилей, то-есть в style.css

Window { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.7); 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; } .Window:target { display: block; pointer-events: auto; } .Window > div { width: 460px; position: relative; margin: 10% auto; padding: 30px 10px 10px; border-radius: 10px; background: #fff; box-shadow: 0px 0px 20px 2px; } .close { background: #cc3300; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover { background: #990000; }

Сохраняем, можно поиграться со стилями, и что-то сделать красивее, поменять фон, рамку другую сделать и так дальше. Переходим на страницу где вы хотите чтоб у вас всплывало данное окно, и вставьте следующий код:

Кнопка X Здесь будет содержимое окна

Теперь немного разберем что в нем, нужно вам поменять. Где прописано «Кнопка» там вы можете вставить, как картинку таи текст, вообще что хотите, то-есть при нажатии на её, будет открываться окно. Там где прописано «Здесь будет содержимое окна» вставьте то что вы бы хотели видеть в всплывающем окне, вот в принципе и все.

НОВОСТИ!

Ну и на по следок новость как всегда, что-то я зачастил с новостями уже)) Сделал себе небольшую страничку с партнерской программой, в виде , порошу всех перейти на нее и посмотреть, может кто-то даст еще какие-то советы интересные, например что-то дополнить, ну вы понимаете о чем я говорю. Еще есть некоторые мысли по ней, чтоб добавить видео со мной, может инструкцию, ну что-то в этом роде, Вообщем жду от вас комментарий!

Модальное окно – маленькое окошко, которое всплывает, чтобы сказать о чем то важном. Сложно ли сделать модальное окно без Bootstrap? Попробуем разобраться.

Обычно, я помещаю его перед закрывающим тэгом body.

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

Вот один из моих любимых трюков, когда вы можете отцентровать и вертикально и горизонтально, без знания высоты и ширины.

Modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }

Это очень удобно так как, открытое модальное окно обычно должно находится прямо по центру, несмотря на ширину. Высота, тем более скорее всего изменится, так как она зависит от контента внутри.

Обратите внимание мы использовали position: fixed; чтобы пользователи могли иметь возможность скроллить вниз, в то время как открытое модальное окно оставалась всегда посередине. Я считаю, в целом, что значение fixed уже можно смело использовать, даже на мобильных устройствах. Однако, если вам нужно учесть старые телефоны, попробуйте заменить значением absolute.

На больших экранах, типичное открытое модальное окно не только отцентровано, но и ограниченно по ширине.

Modal { width: 600px; }

Однако, есть такие экраны, которые меньше 600px в ширину. Чтобы исправить ситуацию добавим максимальную ширину.

Modal { width: 600px; max-width: 100%; }

Задавать высотку еще более ответственное занятие. Мы знаем, что контент имеет свойство меняться. Плюс, техника центрирования через transform радостно обрезает края, без появления скролл-бара. Установка максимальной высоты обезопасит нас второй раз.

Modal { height: 400px; max-height: 100%; }

После того как мы разобрались с высотой, пришло время заняться свойством overflow. Распространенно использовать overflow значение, прямо в.modal, однако, есть две проблемы с этим:

• Мы можем захотеть использовать элементы, которые не должны скролиться
• Overflow обрежет тень, которую мы будем использовать.

Я бы предложил использовать внутренний контейнер:

Учитывая, что у нас будет контент который нужно скролить, нам нужно задать высоту. Есть несколько вариантов. Вот один из них:

Modal-guts { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* отступы */ padding: 20px 50px 20px 20px; /* разрешим скролить */ overflow: auto; }

Идея использования модальных окон в том, чтобы принудить выполнить какое-либо действие, перед тем, как что-нибудь будет сделано. Сделать кнопку закрытия окна видной в любом состоянии кажется не плохой идеей.

Закрыть

Обычное модальное окно делают с полностью затемняющимся фоном. Это полезно по нескольким причинам:

• оно может затемнить остальной экран
• может предотвратить клики/взаимодействие с контентом вокруг модального окна
• может использоваться, как гигантская кнопка закрытия

Типичный пример использования:

.modal { /* все что мы уже выше описали */ z-index: 1010; } .modal-overlay { z-index: 1000; position: fixed; top:0; left:0; width: 100%; height: 100%; }

Я заметил распространенное явление, когда по умолчанию .modal класс скрыт, как например display: none; Потом, чтобы открыть, добавляют класс .modal.open {display: block;}

Однако, это может быть и плохо, потому что ваша модальное окно может быть display: flex; и display: block; его перепишет.

Modal { .display: flex; } .modal.closed { display: none; }

Скорее всего Вы уже не раз видели в интернете всплывающее модальное окно - подтверждение регистрации, предупреждение, справочная информация, загрузка файла и многое другое. В этом уроке я предложу несколько примеров по созданию самых простых модальных окон.

$(document).ready(function()
{
alert("Текст во всплывающем окне");
});

Код вставляете в любое место в body Вашей страницы. Сразу после загрузки страницы, без каких-либо команд, Вы увидите окно следующего вида:

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

$(window).load(function()
{
alert("Загрузка страницы завершена!)");
});

Часто можете видеть, что форма входа и регистрации находятся именно в таких окнах. Приступим к делу

Для начала напишем html-часть . Этот код размещаем в body Вашего документа.

Вызов модального окна

Текст модального окна
Закрыть
Текст в модальном окне.

Код CSS . Либо в отдельном css-файле, либо в в head.

body {
font-family:verdana;
font-size:15px;
}
.link {color:#fff; text-decoration:none}
.link:hover {color:#fff; text-decoration:underline}
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:absolute;
left:0;
top:0px;
-top: 40px;
width:440px;
height:200px;
display:none;
z-index:9999;
padding: 20px;
overflow: hidden;
}
#boxes #dialog {
width:375px;
height:203px;
padding:10px;
background-color:#ffffff;
}
.top {
position:absolute;
left:0;
top:0;
width:370px;
height:30px;
background: #0085cc;
padding: 8px 20px 6px 10px;
}
.close {
float:right;
}
.content {
padding-top: 35px;
}

В коде jQuery основное внимание уделим позиции модального окна и маске, в нашем случае постепенному затемнению фона.

Внимание! Не забываем подключить библиотеку в head документа!

Подключение библиотеки с сайта Google. Ну и непосредственно сам код jQuery.

Код jQuery

$(document).ready(function() {
$("a").click(function(e) {
e.preventDefault();
var id = $(this).attr("href");
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$("#mask").css({"width":maskWidth,"height":maskHeight});
$("#mask").fadeIn(1000);
$("#mask").fadeTo("slow",0.8);
var winH = $(window).height();
var winW = $(window).width();
$(id).css("top", winH/2-$(id).height()/2);
$(id).css("left", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".window .close").click(function (e) {
e.preventDefault();
$("#mask, .window").hide();
});
$("#mask").click(function () {
$(this).hide();
$(".window").hide();
});
});

В наше время для различных сайтов нормой стали всевозможные всплывающие модальные окна - popup"ы - для регистрации, авторизации, информационные окна, - всевозможных форм и размеров. Также существует огромное количество плагинов к тому же jQuery для простого и удобного создания таких попапов - тот же Shadowbox , например.

Внешний вид, размеры и оформление таких попапов совершенно разнообразными - с оверлеем, тенюшками, анимациями - всего не счесть. Объединяет их только, пожалуй, тот факт, что обычно они выводятся в самом центре страницы - как по горизонтали, так и по вертикали. И центрирование это производится средствами JS. Я не буду вдаваться в подробности этих расчетов, опишу их лишь вкратце:

HTML-код попапа обычно имеет такую структуру:

... -- Попап вместе с содержимым -->

И CSS (здесь и ниже я умышленно буду опускать написание некоторых свойств, необходимых лишь для некоторых браузеров и их версий, оставив лишь самое основное ):

Popup__overlay {
position : fixed ;
left : 0 ;
top : 0 ;
background : #000 ;
opacity : .5 ;
filter : alpha(opacity=50 );
z-index : 999
}
.popup {
position : absolute ;
width : 20% ;
z-index : 1000 ;
border : 1px solid #ccc ;
background : #fff
}

JS определяет браузер и версию браузера, и на основании этого высчитывает размеры рабочей области и размеры самого попапа (если они не заданы), а затем производятся нехитрые вычисления положения его левого верхнего угла (css-свойства left и top для.popup). Многие плагины также реагируют на изменение размеров страницы, пересчитывая всё это дело каждый раз, с тем, чтобы попап располагался точно в центре рабочей области.

Я по натуре своей перфекционист (знаю, порой это плохо), и частенько заморачиваюсь даже над мелкими деталями, пытаясь улучшить и добавить максимально возможную расширяемость этим деталям, и меня не мог не зацепить именно этот момент в работе всех этих плагинов. Возникла мысль, что всю работу по позиционированию попапа можно переложить с плеч JS на плечи самого браузера, то есть выполнять эту работу средствами CSS.

Этим и займёмся.

Ниже я приведу пример попапа, работающего во всех мажорных версиях основных браузеров. Для корректной его работы в IE
< div class ="popup">

И немного CSS:

Popup__overlay {
position : fixed ;
left : 0 ;
top : 0 ;
width : 100% ;
height : 100% ;
z-index : 999
}
.popup {
}