Как сделать красивое всплывающее окно css. Всплывающие модальные окна (popup) с помощью CSS и JS. А может и это вам будет интересно
3. Пример модального окна jQuery, вызванного по ссылке (с Демо)
Скорее всего Вы уже не раз видели в интернете всплывающее модальное окно - подтверждение регистрации, предупреждение, справочная информация, загрузка файла и многое другое. В этом уроке я предложу несколько примеров по созданию самых простых модальных окон.
Создаём простое всплывающее модальное окно Приступим к рассмотрению кода простейшего модального окна, которое будет сразу появлятьсяjQuery код
$(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
{
}
Popup
{
left
: 50%
;
top
: 50%
;
width
: 400px
;
height
: 200px
;
margin-left
: -200px
;
margin-top
: -100px
}
Отрицательные margin"ы в половину ширины и высоты - банально и скучно, ничего оригинального в этом нет. Идём дальше.
Размеры попапа зависят от содержимого Сперва - выравнивание по горизонтали - это вроде бы проще. Если попап фиксированной ширины - то достаточно будет следующего:Popup
{
margin
: auto
}
На вертикальное выравнивание это никак не повлияет, и, к слову, если вам достаточно лишь горизонтального выравнивания, то на этом можно и остановиться, указав еще какой-нибудь верхний отступ попапа. Но нам этого мало! Идём дальше.
Вертикальное выравнивание. Здесь уже становится интересно. С такой задачей, конечно, без проблем справилась бы таблица или эмуляция таблицы с помощью display: table & display: table-cell, но заставить такое работать в старых IE - себе дороже. Таблица также отпадает - по понятным причинам.
Итак, margin уже отпадает - размеров мы не знаем. Вспоминаем, что же есть из свойств с подобными эффектами. Ага, text-align. Но только для инлайновых элементов. ОК. Кажется, сам Бог велел использовать display: inline-block - блочный элемент, к которому можно было бы применить свойства для инлайновых элементов. С поддержкой этого свойства у всех браузеров тоже всё, можно сказать, в порядке. Код становится примерно таким:
Popup__overlay
{
position
: fixed
;
left
: 0
;
top
: 0
;
width
: 100%
;
height
: 100%
;
z-index
: 999
;
text-align
: center
}
.popup
{
display
: inline
-block
;
vertical-align
: middle
}
Остаётся вертикальное выравнивание - нам подойдёт vertical-align. В любой другой ситуации было бы также уместно использовать line-height, но поскольку у нас нет фиксированной высоты страницы (line-height в данном контексте), здесь использовать её нельзя. На помощь приходит один трюк с вертикальным выравниванием элементов неизвестных размеров. Я точно помню, что нашел этот способ на Хабре, но, к сожалению, не смог найти ссылку на тот топик. Заключается этот способ в следующем: добавляется inline-block элемент нулевой ширины и 100%-ой высоты родителя, который «расхлопывает» высоту строки до 100% высоты родителя, то есть до высоты рабочей области страницы. Сделаем это изящнее - вместо лишней разметки воспользуемся псевдоэлементами:
Popup__overlay
:after {
display
: inline
-block
;
width
: 0
;
height
: 100%
;
vertical-align
: middle
;
content
: ""
}
Осталось добавить полупрозрачное затемнение оверлея - с этим справится rgba. Всё! Теперь положение попапа регулируется только средствами браузера на уровне CSS.
Для вывода важных сообщений или просто изменений, произведённых на сайте, можно использовать всплывающие окна. Всплывающие окна бывают двух видов: обычные и модальные.
Примечание: модальные окна отличаются от обычных тем, что пока модальное окно открыто пользователь не может взаимодействовать с другими элементами сайта до тех пор, пока не закроет модальное окно.
Посмотреть пример модального окна можно с помощью JavaScript, воспользовавшись методом alert() .
Всплывающее окноПервым шагом создания всплывающего окна является создание элемента (или любого другого элемента) и его оформление:
Название документа .okno { width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; } Всплывающее окошко! Попробовать »
Этот и будет использоваться в качестве всплывающего окна. Теперь мы его скрываем с помощью значения none свойства display и добавляем ссылку, при нажатии на которую будет появляться всплывающее окно:
Название документа #okno { width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; display: none; } #okno:target {display: block;} Всплывающее окошко! Вызвать всплывающее окно Попробовать »
Используя псевдо-класс:target мы выбираем и применяем стили к элементу, к которому был осуществлён переход. Таким образом после перехода по ссылки значение свойства display элемента сменится с none на block .
Теперь надо расположить посередине страницы, чтобы он стал похож на всплывающее окно. Делаем его абсолютно позиционированным и центрируем его по вертикали и горизонтали:
#okno { width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; display: none; /*позиционируем и центрируем*/ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
Следующим шагом будет реализация скрытия окна, при нажатии на любое место страницы или на само окно. Для этого нам нужно расположить элемент внутри элемента :
Затем мы позиционируем элемент и растягиваем его на всю ширину и высоту окна. Задаём ему display: none; и перенаправляем нашу ссылку на него:
Название документа #main { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #okno { width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } #main:target {display: block;} Всплывающее окошко! Вызвать всплывающее окно Попробовать »
У элемента убираем display: none; (он больше не нужен, так как скрываем мы теперь ). В итоге родительский выполняет теперь скрытие всплывающего окна, перенаправляя выбор на страницу.
На этом создание простого всплывающего окна закончено.
Модальное окноДля создания всплывающего модального окна, берём элемент , оформляем его и добавляем ссылку, при нажатии на которую он будет появляться:
Название документа #okno { width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } #okno:target {display: block;} Всплывающее окошко! Вызвать всплывающее окно
Следующим шагом в создании полноценного модального окна будет добавление кнопки, которая будет скрывать наше окно. Кнопку сделаем из обычной ссылки, добавив её к нашему и оформив:
Название документа
#okno {
width: 300px;
height: 50px;
text-align: center;
padding: 15px;
border: 3px solid #0000cc;
border-radius: 10px;
color: #0000cc;
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
#okno:target {display: block;}
.close {
display: inline-block;
border: 1px solid #0000cc;
color: #0000cc;
padding: 0 12px;
margin: 10px;
text-decoration: none;
background: #f2f2f2;
font-size: 14pt;
cursor:pointer;
}
.close:hover {background: #e6e6ff;}
Всплывающее окошко!
Закрыть окно
Вызвать всплывающее окно
Попробовать »
Для эффекта затемнения страницы при выводе модального окна, надо поместить весь имеющийся код окна в дополнительный :
Всплывающее окошко!
Закрыть окно
Позиционируем родительский и растягиваем его на всю ширину и высоту окна. Задаём ему display: none; и перенаправляем ссылку вызова окна на него.
У дочернего убираем display: none; (он больше не нужен, так как родительский будет скрывать всё, что находится внутри него). В итоге родительский теперь отвечает за отображение модального окна и за затемнение фона страницы, а дочерний только за оформление самого окна:
Название документа
#zatemnenie {
background: rgba(102, 102, 102, 0.5);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
}
#okno {
width: 300px;
height: 50px;
text-align: center;
padding: 15px;
border: 3px solid #0000cc;
border-radius: 10px;
color: #0000cc;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: #fff;
}
#zatemnenie:target {display: block;}
.close {
display: inline-block;
border: 1px solid #0000cc;
color: #0000cc;
padding: 0 12px;
margin: 10px;
text-decoration: none;
background: #f2f2f2;
font-size: 14pt;
cursor:pointer;
}
.close:hover {background: #e6e6ff;}
Всплывающее окошко!
Закрыть окно
Вызвать всплывающее окно
Попробовать »
Примечание: если вам нужно, чтобы при заходе на страницу пользователь сразу видел всплывающее окно (а не вызывал его по ссылке), то адрес страницы надо будет прописывать вместе с id окна (например адрес может выглядеть так: site.ru/papka/documet.html#okno).
В данном уроке я не открою тайну для матерых верстальщиков и гуру css, но данная статья будет полезна начинающим. именно здесь вы сможете узнать, как создавать всплывающие окна поверх всего сайта.Чаще всего такие окна появляются после совершения определенных действий на сайте, например, пользователь нажимает на ссылку «Заказать обратный звонок» и перед ним всплывает форма заказа.
Очень удобно использовать PopUp окна в связке с ajax, но это уже тема другого урока.
Всё больше и больше в сети начинает появляться веб-ресурсов, которые используют всплывающие окна PopUp. В пример можно привести всем знакомые социальные сети. Все лишние данные со скриншотов удалены.
Twitter
Думаю достаточно доводов, чтобы начать изучать вопрос: как же сделать на своем сайте всплывающее окно PopUp.
Постановка задачи(ТЗ) Необходимо создать поверх всего сайта всплывающее окно с затемнением экрана.РешениеСпособ 1html Sample Text Text in Popup css *{ font-family: Areal; } .b-container{ width:200px; height:150px; background-color: #ccc; margin:0px auto; padding:10px; font-size:30px; color: #fff; } .b-popup{ width:100%; height: 2000px; background-color: rgba(0,0,0,0.5); overflow:hidden; position:fixed; top:0px; } .b-popup .b-popup-content{ margin:40px auto 0px auto; width:100px; height: 40px; padding:10px; background-color: #c5c5c5; border-radius:5px; box-shadow: 0px 0px 10px #000; } Результат:
Очень часто предлагают использовать:
Position:absolute;
Да, результат получается аналогичный, но из-за того, что у нас задана высота блока «затемнения», появляются полосы прокрутки. Именно поэтому такой метод не подходит.
Единственным минусом данного способа является то, что Internet Explorer поддерживает данное свойство только с версии 8.0.
Добавление магии на Jquery Теперь добавим ссылки для скрытия/отображение нашего всплывающего окна.Для этого необходимо подключить библиотеку JQuery и небольшой скрипт:
$(document).ready(function(){
//Скрыть PopUp при загрузке страницы
PopUpHide();
});
//Функция отображения PopUp
function PopUpShow(){
$("#popup1").show();
}
//Функция скрытия PopUp
function PopUpHide(){
$("#popup1").hide();
}
Также необходимо обновить Html:
Sample Text Show popup Text in Popup Hide popup
Результат Теперь при загрузке страницы всплывающее окно PopUp скроется.Результат можно посмотреть тут.