Как сделать модальное окно html. Модальное окно на JavaScript

На этом создание простого всплывающего окна закончено.

Для создания всплывающего модального окна, берём элемент , оформляем его и добавляем ссылку, при нажатии на которую он будет появляться:

Название документа #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).

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

$(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();
});
});

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

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

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

Рассмотрим модальное окно на 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 Здесь будет содержимое окна

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

НОВОСТИ!

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

В наше время для различных сайтов нормой стали всевозможные всплывающие модальные окна - 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 {
}