Как вызвать модальное окно в html. Самое простое модальное окно на HTML и CSS. Модальное окно при нажатии на кнопку
Давайте рассмотрим создание модальных всплывающих окон, которые в народе еще называются popup-окна.
О создании всплывающих (модальных) окон в WordPress, мы говорили .
В данном примере модальные окна появляются при клике на кнопку (текст) и исчезают при нажатии в любую область мимо модального окна, или при клике на ключевое слово.
Изменяя значения в скрипте fadeIn вы можете увеличить или уменьшить скорость открытия всплывающего модального окна, а fadeOut — увеличить или уменьшить скорость закрытия .
Для работы необходимо обязательно подключить библиотеку jQuery .
Посмотреть и скачать демо пример вы можете ниже.
Если у вас есть вопросы, задавайте в комментариях.
HTML Нажми на меня! И на меня тоже... Заглавие первого модального окна!Ты действительно любишь васаби?
НЕТ Заглавие второго модального окна!
Небо синее?
ДА Wordpress-club.com CSS .fond { position:absolute; padding-top:45px; top:0; left:0; right:0; bottom:0; background-color:#f8b334; } .mymagicoverbox { display:inline-block; color:#ffffff; padding:10px; margin:10px; cursor:pointer; font-weight:300; font-family:"Roboto"; } .mymagicoverbox_fenetre { z-index:9999; position:fixed; margin-left:50%; top:100px; text-align:center; display:none; padding:5px; background-color:#ffffff; color:#97BF0D; font-style:normal; font-size:20px; font-weight:300; font-family:"Roboto"; } .mymagicoverbox_fenetreinterieur { text-align:center; overflow:auto; padding:10px; background-color:#ffffff; color:#666666; font-weight:400; font-family:"Roboto"; font-size:17px; border-top:1px solid #e7e7e7; margin-top:10px } .mymagicoverbox_fermer { color:#CB2025; cursor:pointer; font-weight:400; font-size:14px; font-style:normal font-family:"Roboto"; } #myfond_gris { display: none; background-color:#000000; opacity:0.7; width:100%; height:100%; z-index:9998; position:fixed; top:0; bottom:0; right:0; left:0; } JS $(document).ready(function(){ $(".mymagicoverbox").click(function() { $("#myfond_gris").fadeIn(300); var iddiv = $(this).attr("iddiv"); $("#"+iddiv).fadeIn(300); $("#myfond_gris").attr("opendiv",iddiv); return false; }); $("#myfond_gris, .mymagicoverbox_fermer").click(function() { var iddiv = $("#myfond_gris").attr("opendiv"); $("#myfond_gris").fadeOut(300); $("#"+iddiv).fadeOut(300); }); });
Давайте рассмотрим создание модальных всплывающих окон, которые в народе еще называются popup-окна. О создании всплывающих (модальных) окон в WordPress, мы говорили в отдельном уроке. В данном примере модальные окна появляются при клике на кнопку (текст) и исчезают при нажатии в любую область мимо модального окна, или при клике на ключевое слово. Изменяя значения в скрипте fadeIn вы можете увеличить или уменьшить скорость открытия всплывающего модального окна, а fadeOut - увеличить или уменьшить скорость закрытия. Для работы необходимо обязательно подключить библиотеку jQuery. Посмотреть и скачать демо пример вы можете ниже. Если у вас есть вопросы, задавайте в комментариях. HTML 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; }
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; }
Сохраняем, можно поиграться со стилями, и что-то сделать красивее, поменять фон, рамку другую сделать и так дальше. Переходим на страницу где вы хотите чтоб у вас всплывало данное окно, и вставьте следующий код:
| 1 2 3 4 5 6 7 | < a href= "#ModalOpen" title= "" > Кнопка < div id= "ModalOpen" class = "Window" > < div> < a href= "#close" title= "Закрыть" class = "close" > X Здесь будет содержимое окна |
Кнопка X Здесь будет содержимое окна
Теперь немного разберем что в нем, нужно вам поменять. Где прописано «Кнопка» там вы можете вставить, как картинку таи текст, вообще что хотите, то-есть при нажатии на её, будет открываться окно. Там где прописано «Здесь будет содержимое окна» вставьте то что вы бы хотели видеть в всплывающем окне, вот в принципе и все.
НОВОСТИ!
Ну и на по следок новость как всегда, что-то я зачастил с новостями уже)) Сделал себе небольшую страничку с партнерской программой, в виде , порошу всех перейти на нее и посмотреть, может кто-то даст еще какие-то советы интересные, например что-то дополнить, ну вы понимаете о чем я говорю. Еще есть некоторые мысли по ней, чтоб добавить видео со мной, может инструкцию, ну что-то в этом роде, Вообщем жду от вас комментарий!
Для вывода важных сообщений или просто изменений, произведённых на сайте, можно использовать всплывающие окна. Всплывающие окна бывают двух видов: обычные и модальные.
Примечание: модальные окна отличаются от обычных тем, что пока модальное окно открыто пользователь не может взаимодействовать с другими элементами сайта до тех пор, пока не закроет модальное окно.
Посмотреть пример модального окна можно с помощью 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 скроется.Результат можно посмотреть тут.
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();
});
});