Рассказывая о различных техниках сайтостроения, было бы нелепо не рассказать, о некоторых способах создания модальных окон. О назначении, полезности и возникающих проблемах использования всплывающих, модальных окон мы рассуждать не будем. Разберем лишь один из многочисленных примеров создания таких окошек.
Бывают ситуации когда нет возможности использовать специальные плагины, например такие как
Давайте посмотрим, как это сделать:
HTML
Начнем с добавления<a></a>
тегов со следующими атрибутами:
href
-#?w=500
указывает ширину окнаrel
– уникальный атрибут для каждого окнаclass="poplight"
– класс для показа всплывающего окна
<a href="#?w=500" rel="popup_name" class="poplight">См. Окно в действии - Ширина = 500px</a> |
Затем нам необходимо создать встроенную разметку для всплывающего окна. Разместить можно в любом месте страницы, ну например в нижней части содержания. Обратите внимание, что идентификатор всплывающего окна соответствует атрибуту rel тега <a></a>
Это и будет связывать ссылку и всплывающее окно вместе.
<div id="popup_name" class="popup_block"> <h2>Заголовок</h2> <p>Любой текст,что душе угодно</p> </div> |
И так, с размещением нашего окна на странице мы разобрались, теперь давайте оформим его с помощью стилей, придадим ему, так сказать, благопристойный вид.
CSS Вёрстка
Для пущей ясности, я прописал некоторые пояснения к параметрам стиля нашего окошка. Так как всплывающие окна могут иметь разный размер, мы не указываем в CSS popup_block края окна, вычислить необходимый размер, это как раз задача для jQuery.
#fade { display: none;/*--по умолчанию скрыто--*/ background: rgba(7, 87, 207, 0.8); position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: .80; z-index: 9999; } .popup_block { display: none; /*--по умолчанию скрыто--*/ background: #fff; padding: 20px; border: 8px solid rgb(134, 134, 134); float: left; font-size: 85%; position: fixed; top: 50%; left: 50%;color: #000; max-width: 750px; min-width: 320px; height: auto; z-index: 99999; /*--CSS3 тень блока--*/ -webkit-box-shadow: 0px 0px 20px #000; -moz-box-shadow: 0px 0px 20px #000; box-shadow: 0px 0px 20px #000; /*--CSS3 скругление углов--*/ -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; } .popup_block p { font-weight: 400; padding: 0; margin: 0; color: #000; line-height: 1.6;} .popup_block h2 { margin: 0px 0 10px; color: rgb(43, 43, 43); font-weight: 400; text-align: center; text-shadow: 1px 1px 2px #0D0C0C; } /* формируем кнопку закрытия */ .close { background-color: rgba(61, 61, 61, 0.8); border: 2px solid #ccc; height: 25px; line-height: 20px; position: absolute; right: -17px; font-weight: bold; text-align: center; text-decoration: none;padding: 0; top: -17px; width: 25px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:before { color: rgba(255, 255, 255, 0.9); content: "X"; font-size: 12px; text-shadow: 0 -1px rgba(0, 0, 0, 0.9); } .close:hover { background-color: rgba(252, 20, 0, 0.8); } .shadow { box-shadow:4px 4px 10px #857373; -webkit-box-shadow:4px 4px 10px #857373; -moz-box-shadow:4px 4px 10px #857373; padding:0; } /*--фиксированное позиционирование для IE6--*/ *html #fade { position: absolute; } *html .popup_block { position: absolute; } |
С формированием окна и его внешнего вида с помощью css, думаю особых сложностей не возникнет. Стили можете прописать непосредственно на странице HTML, между тегами <head> и </head>
, а можете вынести в отдельный файл ваших стилей, обычно это файл style.css, или что-то в этом роде.
Настройка JQuery
Для полноценной работы модального окна, необходимо подключить jQuery, кто не знаком с работой этой библиотеки можете прочитать JQUERY — ВВОДНАЯ.
Ну, а мы пойдем дальше. Вы можете </body>
, разместив такую строку:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> |
После последнего обновления 15.01.2017, тестировал работу скрипта вплоть до версии jQuery 3.1.1, полёт нормальный ))).
Так же нам понадобится сам плагин, его тоже подключаем к странице, всё там же перед тегом </body>
:
<script type="text/javascript" src="dm-modal.js"></script> |
В следующем шаге рассмотрим начинку и функции плагина jquery, для активации нашего всплывающего окна, код содержит некоторые пояснения, для лучшего понимания того, что мы делаем.
Плагин JQuery
$(document).ready(function(){ //При нажатии на ссылку с классом poplight и href атрибута тега <a> с # $('a.poplight[href*=\\#]').click(function() { var popID = $(this).attr('rel'); //получаем имя окна, важно не забывать при добавлении новых менять имя в атрибуте rel ссылки var popURL = $(this).attr('href'); //получаем размер из href атрибута ссылки //запрос и переменные из href url var query= popURL.split('?'); var dim= query[1].split('&'); var popWidth = dim[0].split('=')[1]; //первое значение строки запроса //Добавляем к окну кнопку закрытия $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" title="Закрыть" class="close"></a>'); //Определяем маржу(запас) для выравнивания по центру (по вертикали и горизонтали) - мы добавляем 80 к высоте / ширине с учетом отступов + ширина рамки определённые в css var popMargTop = ($('#' + popID).height() + 80) / 2; var popMargLeft = ($('#' + popID).width() + 80) / 2; //Устанавливаем величину отступа $('#' + popID).css({ 'margin-top' : -popMargTop, 'margin-left' : -popMargLeft }); //Добавляем полупрозрачный фон затемнения $('body').append('<div id="fade"></div>'); //div контейнер будет прописан перед тегом </body>. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //полупрозрачность слоя, фильтр для тупого IE return false; }); //Закрываем окно и фон затемнения $(document).on('click', 'a.close, #fade', function() { //закрытие по клику вне окна, т.е. по фону... $('#fade , .popup_block').fadeOut(function() { $('#fade, a.close').remove(); //плавно исчезают }); return false; }); }); |
Заключение:
В общем и целом, если не лезть в дебри и не нагружать себя излишней кодовой абракадаброй, наше замечательное модальное окошко готово к работе, и ждет Ваших мыслей переложенных в текст, или любую другую полезную информацию.
Тем кто хотел бы использовать модальное окно, для размещения в нем видео или масштабных изображений, я все же посоветовал воспользоваться специальными плагинами типа
В следующий раз обязательно расскажу и покажу на примере, как добавить в модальное окно полосу прокрутки, и наверняка, многим будет интересно узнать об интеграции контактной формы и других сторонних объектов в всплывающее окно. Так что не теряйтесь в паутине и следите за обновлениями!
При возникновении проблем с остановкой видео при закрытии модального окна, можете воспользоваться решением описанным здесь.
Обновление: Версия dm-modal.js v1.3 (15.01.2017)
Исправлено: Заменена устаревшая функция .live()
, используется синтаксис href*=\\#
. Теперь плагин работает с актуальными версиями библиотеки jQuery
На этом всё! Надеюсь, получился еще один полезный урок.
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
Здравствуйте! Подскажите, пожалуйста, как сделать чтобы при нажатии на дополнительную (не та что в верху справа) кнопку «Закрыть» окно исчезало. Спасибо!
Здравствуйте!
Если я вас правильно понял, то очень просто. Например, располагаете любую кнопку или текстовую ссылку внутри окна, ну скажем, в конце сообщения, прописываете к кнопке(ссылке) атрибуты, такие же как у стандартной кнопки закрытия.
<a href="#" class="close" rel="nofollow">Закрыть</a>
В исполняемом файле winmodal.js находите строку
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close" rel="nofollow"><img src="close_pop.png" class="btn_close" title="Закрыть окно" alt="Закрыть" /></a>');
и вырезаете все что связано с выводом кнопки закрытия по умолчанию
<a href="#" class="close" rel="nofollow"><img src="close_pop.png" class="btn_close" title="Закрыть окно" alt="Закрыть" /></a>
Должно получиться так:
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('');
Позиционируете кнопку слева или справа по стандарту, например если хотите справа,то самым простым решением, будет так:
<p style="text-align: right;"><a href="#" class="close" rel="nofollow">Закрыть</a> </p>
rel="nofollow" указывать не надо, это у меня плагин в комментах закрывает все ссылки, даже те, которые в примерах кода, стоит на страже, так сказать)))
Огромное спасибо. Действительно просто. Долголетия и процветания Вам И Вашему сайту.
Удачи! Заходите ещё!
Добрый день. Спасибо, искал то что хотел и нашел у Вас. Только один вопрос. У меня одна кнопка работает, а вот при добавлении второй на этой же странице, показывает содержимое первого блока. Если на странице нужно сделать 4-5 кнопок с разными (ихними) всплывающими подсказками, как это реализовать?
Всё очень просто, для каждого окна прописан уникальный атрибут в ссылке
rel="popup_name"
, каждому новому окну присваивает свой атрибут типа:rel="popup1"
,rel="popup2"
и т.д. Не забывайте что атрибут rel="" должен совпадать с id модального окна. Например в ссылке на вызов у васrel="popup1"
соответственно срабатывать будет окно сdiv id="popup1"
Смотрите исходники, и по аналогии делайте у себя, внося нужные вам поправки.
Удачи!
Спасибо так и сделал. Все работает!
Доброй ночи driver! Вот опять к вам за помощью))) Есть модальное окно ( к сожалению не ваше)
Контент вставляется без проблем, встала даже форма обратной связи, но вот вопрос:
как правильно добавить в скрипт :
//При клике вне области модального окна, фон и модальное окно скрываются
$(«.xxxxxxxxx»).click (function () {
$(«.zzzzzz, .ccccccc»).hide ();
$(«body»).css ({"overflow":"auto"});
});
чтобы так и сделать, окно закрывается при клике вне окна, на любом месте экрана?
что нужно вставить вместо xxxxx, cccccc и zzzzzz ???
Заранее спасибо!!!
Вместо .хххххх прописываете класс соответствующий фону затемнения, какой у вас он не знаю, что то типа
.modal_bg
или еще как то, на место .zzzz тоже самое.modal_bg
или еще как то, а там где .ccccc — класс самого модального блока.modal_window
или как там у вас (скоро телепатом стану точно). И смотрите за кавычками, такие («) не катят))))Добрый день!
Написала вам в личку. ОЧЕНЬ надеюсь на ответ. Заранее спасибо!
Ответил на мыло, надеюсь смог вам помочь.
Дорогой driver! Огромное вам спасибо за ответ и неоценимую помощь!!!
Говорю совершенно официально — ВЫ ЛУЧШИЙ в интернете. Вы и NMitra.
Вы всегда терпеливо отвечаете и не требуете за это оплату.
Большое вам человеческое спасибо!
НО )))))
Есть еще вопрос жизненно важный ( тоже напишу в личку попозже)
Когда вернусь обновлять свой блог прямые ссылки на ваш сайт. Вы лучший МАСТЕР своего дела.
Добрый день!
А как сделать так, чтобы при нажатии на ссылку, новая страница(контент) открывалась в модальном окне на текущей странице?
Поместить в модальное окно содержание нужной вам страницы через фрейм:
Определяете необходимые ширину и высоту фрейма
width="500" height="500"
и подгоняете под него нужное вам окно в атрибутеhref="#?w=550"
ссылки на вызов окна:Полосы прокрутки добавляются автоматически. Всё вместе у вас получится примерно такая конструкция в html:
В таком виде у вас будет появляться модальное окно шириной 550px с содержанием страницы заданной в
iframe
, высота подгоняется автоматом в соответствии размера содержания и, с учетом предустановленных в css отступов.Спасибо, получилось, только вот вопрос, а можно сделать чтобы в модальном окне выводился только страницы, без header-а и footer-а?
*только body страницы
Желание понятное, но в данном случае никак.
Здравствуйте!
Уважаемый driver, подскажите пожалуйста, вставил в ваше модальное окно форму и сделал ссылку на кнопку для открытия, но почему-то окно открывается при загрузке страницы, что нужно прописать в скрипте чтобы открывалось только по нажатию кнопки?
Извините за беспокойство, нашёл ошибку. Спасибо Вам за модальное окно. Успехов Вам!
Пожалуйста. Рад что у вас всё получилось)))
Блин, driver, подскажите где найти модальное окно, может попадалось вам на просторах инета, перепробовал уйму, у всех окна не модальные, под ними скролится основной контент. А нужно чтоб сайт под окном не скролился. Типа как вконтакте в фейсе. Спасибо.
Здраствуйте driver, а что с моим комментом что то было не так?
Здравствуйте, Андрей. Извините за задержку с ответом. С вашим комментом всё так )) просто иногда мы предполагаем, а... Теперь, по самому вашему комментарию, цитирую:
Для того чтобы убрать скролл страницы при открытом окне, достаточно в наш winmodal.js добавить одну строку:
Добавлять эту строчку следует в раздел затемнения фона, сразу после строки:
Надеюсь смог вам помочь, хоть и с опозданием.
Здравствуйте,driver,у меня такая проблема: рядом с кнопкой «закрыть» находится кнопка с изображением битой картинки. Как от этого избавиться?
Здравствуйте, Сергей.
Даже не представляю, как это может быть, если картинка отображается, значит путь до неё в скрипте прописан правильно, других картинок кнопки закрытия просто быть не должно, если конечно вы не прописали напрямую в html какую-то другую картинку.
Здравствуйте ,driver. Поставил данный скрипт, все отлично работает, лучший что я находил, однако появилась проблема, перестал работать другой скрипт(lightbox) использующий библиотеки jquery . Как я понимаю нужно куда то прикрутить jQuery.noConflict в ваш скрипт. Можете помочь ? Заранее спасибо.
Спасибо я разобрался
Помогииите, пожалуйста!
Почему у меня не выполняется код?! Я все правильно скопировал на сайт (еще раз перепроверил), но при нажатии на ссылку ничего не происходит, он только, кажется страницу перезагружает. Помогииите! Пожалуйста!
Разобрался. Оказывается я просто поместил HTML-код внутрь маленького блока.
Ну и славненько))))
Окно появляется но не работает кнопка закрыть