Модальное окно с помощью CSS и jQuery
Рассказывая о различных техниках сайтостроения, было бы нелепо не рассказать, о некоторых способах создания модальных окон. О назначении, полезности и возникающих проблемах использования всплывающих, модальных окон мы рассуждать не будем. Разберем лишь один из многочисленных примеров создания таких окошек.
Бывают ситуации когда нет возможности использовать специальные плагины, например такие как fancybox и prettyPhoto, поэтому стоит понять, как можно создать свое собственное модальное окно.
Давайте посмотрим, как это сделать:
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 — ВВОДНАЯ.
Ну, а мы пойдем дальше. Вы можете скачать самую последнюю версию JQuery с сайта библиотеки, или же использовать размещенный в недрах Google отдельный файл, подключив его к документу, в разделе перед закрывающим тегом </body>, разместив такую строку:
<script src="http://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; }); }); |
Заключение:
В общем и целом, если не лезть в дебри и не нагружать себя излишней кодовой абракадаброй, наше замечательное модальное окошко готово к работе, и ждет Ваших мыслей переложенных в текст, или любую другую полезную информацию.
Тем кто хотел бы использовать модальное окно, для размещения в нем видео или масштабных изображений, я все же посоветовал воспользоваться специальными плагинами типа fancybox, поскольку приведенный выше пример модального окна, предназначен больше для легкой и не очень тяжеловесной информации, хотя при желании и это не проблема.
В следующий раз обязательно расскажу и покажу на примере, как добавить в модальное окно полосу прокрутки, и наверняка, многим будет интересно узнать об интеграции контактной формы и других сторонних объектов в всплывающее окно. Так что не теряйтесь в паутине и следите за обновлениями!
При возникновении проблем с остановкой видео при закрытии модального окна, можете воспользоваться решением описанным здесь.
Обновление: Версия dm-modal.js v1.3 (15.01.2017)
Исправлено: Заменена устаревшая функция .live(), используется синтаксис href*=\\#. Теперь плагин работает с актуальными версиями библиотеки jQuery
На этом всё! Надеюсь, получился еще один полезный урок.
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
Это самая лучшая статья по модальным окнам которую я нашел за последние два дня… Спасибо вам, за такой труд… Появилось желание глубже изучать jQyery. Спасибо Вам.
Рад что пригодилось, за отзыв спасибо.
Изучение различных техник, процесс увлекательный и практически нет предела совершенству.
Вещь! То что надо! Спасибо!
Да… симпотичная статейка 🙂 Спасибо!
Подскажите пожалуйста как подгружать содержимое модального окна из внешнего файла.
Спасибо за скрипт, очень помог. Вот только столкнулся с проблемой, при внедрении на сайт. Подскажите, пожалейста, я хочу сделать слайдер в модальнике. Слайдер тоже на jquery, селекторы, названия классов и айдишников не пересекаются, функций тоже. А задумка интересная, слайдер не для фотографий, а для «типа новостей». Кликаешь на иконку на карте и открывается попап с слайдером, в котором будут объекты перелистываться (объекты будут соответствовать определенным новостям). Может подскажите какое-нибудь решение? Буду очень признателен:)
Алексей Спасибо за комментарий.
Как я понял вам нужен слайдер или попросту листалка для контента, для интеграции в модальное окно. Можете посмотреть здесь , простой в исполнении и довольно шустро работающий. Еще с десяток плагинов jQuery здесь: Тынц, ну и на конец широкоформатный слайдер Тут
Подскажите пожалуйста, как или какой слайдер лучше подргрузить внутрь модального окна? Может кто сталкивался с таким?
Нашел для вас Алексей, по моему подходящий вариант Ротатор контента, правда у буржуинов , но думаю разберетесь, в модальное окно встраивается очень просто. Качаете скрипт, прописываете на странице пути и встраиваете структуру ротатора в модальное окно, фон и размер блока ротатора подгоните под окно, сделал пример можете посмотреть Здесь, отталкиваясь от исходников моего примера все у вас получится.
Удачи.
Невероятно благодарен за подсказку! Я и не надеялся за такую оперативность! Сейчас буду переваривать всю информацию:) Как получится результат попробую похвастаться, если конечно еще получится, правда еще проблема на сайте, надо сделать кривые линии, которые будут масштабироваться. Списался с С.Чикуенком, он когда то делал такое на сайте газпрома, взял библиотеку, осталось мелочь — внедрить:) Так что обязательно потом покажу результат. Еще раз спасибо!
Спасибо Алексей за отзыв.
С вашей подачи написал полноценную статью об интеграции ротатора контента в модальное окно, если интересно: Читайте
Рад что тоже смог чем то помочь:)
Блин, у меня руки не от тудого растут и голова пустовата. Могу я вас попросить о помощи? Насчет ротатора статья очень понравилась, но правда я пытаюсь добиться немного другого эффекта. Пытаюсь сейчас соединить ваше модальное окно и простенький, но удобный слайдер, кстати говоря от тогоже буржуя, что и ротатор:) Кстати он довольно функционален, так что думаю что такая заготовка может много кому пригодиться…
Алексей
Буду рад помочь чем смогу, напишите какой из вариантов слайдера вы хотите интегрировать в окно, на сайте исходника их несколько, и я проработаю возможность вставки.
Уважаемый driver, не знаю как вас зовут, но знаю точно, вы хороший человек. Я буду очень благодарен за помощь!
Думаю что для пользователя самым оптимальным сладером будет 4, который с автоскролом (но это регулируется) и не исчезающими кнопками.
P.S.
С радостью списался с вами бы через почту, для ЛС. Надеюсь на дальнейшее сотрудничество:) (почта должна быть в коменте)
Алексей, пишите через форму контактов, которая находится Здесь, а дальше разберемся 🙂
Слайдер взял в обработку, надеюсь что — нибудь наковыряю …
Я из Новосибирска и у меня еще есть еще одна очень интересная скажем так библиотека, которая сейчас очень актуальна, хотел бы предложить разобраться с ней вместе!
У меня почему-то слайдинг не работает, а отладчик ошибок не выдает, я прямо в тупике…
Алексей, здравствуйте.
Поместил слайдер в модальное окошко, но использовал jQuery тот же что и в ротаторе контента, с родным никак не хотел работать. Кнопки навигации слайдера опустил, так как они оригинальной формы и не вписываются в окно, а без них уже не очень удобно для пользователей.
В общем смотрите: Здесь, если смог помочь, буду рад.
Удачи!
Клево, всетаки в библиотеке дело было… А вот насчет кнопок с вами не согласен. Автоматическим ротатором мы принуждаем пользователя в смене контента, причем без возможности вернуться на предыдущий, а это не правильно. Так что попробую сейчас доработать… Огромная благодарность за внедрение!:)
Алексей про кнопки я написал , цитирую:
без них уже не очень удобно для пользователей.
Я не сомневался, что у вас все получится, ну и хотелось бы как — нибудь при случае взглянуть на результат.
Удачи!
Я наконец то решил проблему интеграции. Почему то через java не получается определить ширину объекта, поэтому пришлось определить ее однозначно и вуаля, все заработало!
К сожалению не работает данный скрипт в IE 8
Михаил
IEшка много крови попортил, не идет в 8й версии, есть кнопочка обновления браузера до 9й версии, в ней все работает прекрасно. Вся фича в том, что много, ох как много людей-человеков продолжают путешествовать по «нету» не снявшись с тормозов, пользуя IEшку дремучих версий. Выбор всегда за вами, использовать скрипт у себя, теряя процент IEшко — поклонников, смотреть в будущее, пробовать новые решения или же находить компромиссы, добиваться кроссбраузерности, того или иного нововведения.
Я только не понял, что не работает в ИЕ8?
в ИЕ8 все работает, может Михаил в версиях заблудился … ;)))
Это самая лучшая статья по модальным окнам которую я нашел за последние два дня… Спасибо вам, за такой труд… Появилось желание глубже изучать jQyery. Спасибо Вам.
Поддерживаю!
Здравствуйте!
Подскажите, пожалуйста, как добавить в данное модальное окно полосу прокрутки? Заметил такую особенность, что если добавить в модальное окно слишком много текста, то оно вытягивается по длине и невозможно прокрутить вверх, чтобы посмотреть весь текст целиком.
К тому же, прячется кнопка закрытия, из-за чего модальное окно не закрывается.
Роман здравствуйте!
Спасибо за интерес к статье, а на счет полосы прокрутки, как то не задавался целью, но почему бы и нет, обязательно проработаю этот момент.
К тому же, прячется кнопка закрытия, из-за чего модальное окно не закрывается.
Для закрытия окна достаточно кликнуть вне окошка в любом месте страницы :)))
Для закрытия окна достаточно кликнуть вне окошка в любом месте страницы 🙂 ))
Это понятно, вот только посетители моего сайта с этим могут не справиться.
Кстати, у вас прикольно сделаны кнопки для редактирования текста комментариев (жирный, курсив и т.д.) Какой-то плагин используете или сделали сами?
Роман.
Полосу прокрутки вставил в окошко по простому без лишних выкрутасов, пример кода скину вам на почту.
Плагин форматирования комментов пользую WP Comment Quicktags Plus — расширенная русская версия
Полосу прокрутки вставил в окошко по простому без лишних выкрутасов, пример кода скину вам на почту.
Шикарно получилось. Премного благодарен.
Плагин форматирования комментов пользую WP Comment Quicktags Plus — расширенная русская версия
За это отдельное спасибо. Где тут у вас кнопочки социальных сетей?))
Роман.
Ваши комментарии подтолкнули меня на написание отдельной статьи по теме, так что и вам спасибо)))
Где тут у вас кнопочки социальных сетей?
Можете твитнуть, плюсануть, подписаться на ленту, кинуть в закладки, все на виду)))
Удачи!!!
отличное объяснение. нашел как раз, что искал 🙂
Мужик!!!ты просто гений!!!я два дня не могла модифицировать другие окна, а с некоторыми был просто пипец… Твой код легкий как для применения, так и для модифицирования! спасибо!!!
Юля.
Большое спасибо за отзыв, заглядывайте почаще, буду только рад.
Хорошая статься.
Подскажите пожалуйста как сделать что бы это окно можно было перетаскивать зажав мышкой верхнюю часть окна или еще как ?
john
Именно эта редакция модального окна не предусматривает возможность перемещения в пределах страницы. Вы можете обратить свое внимание на другой метод, с помощью плагина MooTools для создания модальных окон
Удачи!
Спасибо буду иметь ввиду этот вариант, может вы знаете похожий на jquery, я конечно сам то поищу в гуглах и прочих поисковиках и наверняка найду но мне как новичку в этом, тяжело будет разобраться. MooTools конечно отличный вариант но вешать целый дополнительный фреймворк только из за модальных окошечек, сами понимаете черезчур а jquery у меня уже подключен ?
Здравствуйте у меня вопрос Как можно ссылаться на другую страницу с помощью Модального окна «то есть оформить контент на другой странице и вывести его на Модальное окно»
как???
Как поместить контент в модальное окно, подробно расписано в статье. Для наглядности можете посмотреть исходный код демо-страницы, думаю все станет понятно, куда, что и как вставлять. В самом окне можете размещать, как изоображения так и ссылки, на примере все показано. Ссылку на модальное окно оформляете так:
<a href="#?w=500" rel="nofollow">Ваша ссылка на модальное окно</a>Здесь же и устанавливаете размер окна, соответствующий вашим требованиям для размещения контента (href=”#?w=500″ ).
Подскажите пожалуйста можно внедрить плагин Fancybox в битрикс
Lancy
На сколько я в теме, битрикс поддерживает большое количество своих дополнительных плагинов и модулей, и пожалуй, нет ни каких препятствий к подключению сторонних библиотек javascript jQuery, Fancybox в том числе. Как, это уже другой вопрос, скорее так же, как и в любой другой системе управления сайтом. Тонкостей всего процесса рассказать не могу, потому как тупо не работал с этой системой.
Надеюсь все у вас получится и спасибо за внимание к статье.
Здравствуйте.
driver спасибо за статью, пригодилась, скрипт чудо, и всё бы ничего, но параметры иконки закрытия окна поставили в тупик. В других скриптах, том же фенсибоксе эта иконка живёт своей жизнью и связана с окном лишь началом координат. А в данном скрипте иконка привязана к контенту окна. И как я не пытался выставить координаты, ничего не вышло.
Вопрос, как переписать что ли, скрипт, что бы можно было задавать иконке координаты?
Саша, спасибо за внимание к статье.
Обязательно учту ваши пожелания и в ближайшее время проработаю возможность задавать иконке закрытия, координаты не привязанные к контенту окна. Что бы это сделать необходимо вносить изменения в параметры скрипта.
Просто в тех же симплмодал и фенси бокс иконка закрытия более подвижна и можно самому определять где и как ей «стоять». У меня ситуация с несколькими вложенными дивами и тут начинается ерунда, иконка прилипает ко второму диву игнорируя первый (в котором и находятся остальные). Смог выровнять (не задать свободное положение, а именно выровнять, т.к. иконка беспардонно лишь прилипает к диву) по родительскому диву, с помощью
position:absolute; display:inline;, чудом, но это не выход. Если придётся курочать окно, побаиваюсь что и иконка начнёт плясать.
Саша.
Специально экспериментировал с многоуровневыми вложениями различных блочных элементов, от простейшего ротатора контента, контактной формы до слайдера изображений. Иконка закрытия всегда выводится корректно, согласно заданной позиции.
Если придётся курочать окно, побаиваюсь что и иконка начнёт плясать.
В смысле курочить? Изменять размер, внешний вид, цвет фона, все что угодно, от этого расположение иконки закрытия никак не изменится, если конечно вы сами не сочтете нужным изменить ее расположение с помощью изменений в css. «Плясать» иконка уж точно не начнет :)))
Спасибо большое, два дня ищу вменяемую инфу по окнам, встречается шлак один с левыми плагинами и непонятными авторами. Действительно лучшая статья на эту тему. Спасибо вам огромное.
CyberBlade, благодарю.
Огромное спасибо!
Очень просто и удобно!
Уважаемый driver! Не поможете советом начинающему. Есть реализованное окно на jquery.simplemodal OSX. Окно выводиться
Картинка в шапке сайта. Содержимое окна со скриптами в заключительной части страницы. Можно ли сделать реализацию открытия окна со всех страниц сайта используя только команду открытия (что выше)не прописывая все содержимое на каждой странице. Пробовал в шапке разместить глобальную переменную с полным содержанием, но сайт разваливается.(((:
Здравствуйте!
Подскажите пожалуйста как в этом модальном окне сделать так, чтобы большой по размеру контент прокручивался а не растягивал модальное окно?
Demonik просто сделать модальное окно с полосой прокрутки.
Удачи!
А, как сделать чтоб оно само закрывалось ? Внутри окна сделал ссылками выбор региона, при переходе окно не закрывается самостоятельно…
хорошо бы, если бы еще было понятно куда прицепить последний код jquery
файл отдельный создать или как ссылку на него дать
кароч — непонятно, а то можно было бы пользоваться
Идеально бы было еще рассказать как это все на свой e-mail отправить. А то форма есть, а механизм отправки не прописан.
Предыдущее сообщение относилось к форме обратной связи в таком модальном окне.
Ну дык, и нуна писать коммент именно к той записи. А про механизм отправки почты через форму обратной связи, это совсем другая история и написано про это в «нете» достаточно, зачем повторяться…
Возникли проблемы в 9 IE. Страница длинная, с боковой полосой прокрутки. Затемнение происходит в верху страницы, на первых 100% высоты. Окно размещается там же, по центру. Учитывая то, что окно вызывается ссылкой, которая примерно на 3 экране, то не сразу видно, что после клика вообще что то случилось.
Ну и для кучи, там же в IE нет крестика закрыть.
А в мазиле он с border
Как сделать, что бы в IE затемнялась вся страница целиком? и окно выводилось по центру видимой области, а не где то там далеко вверху.
Спасибо!
Сергей, спасибо за интерес к статье. На счет IE9, сразу же проверил работу модального окна на демо-странице в этом горячо мной не любимом браузере. Затемнение работает по всей странице. Специально увеличивал область прокрутки страницы до немыслимых размеров, окно выдается как положено в центре и с полноценным затемнением. Так что извините Сергей, сходу и на уровне телепатии помочь вам не сумею. Ну а крестик закрытия отображается действительно с border, правда не в мазиле, а все в том же тормознутом IEшке. Спасибо за наводку. Специально для этого браузера в стилях для картинки кнопки закрытия img.btn_close добавьте border: 0;.
Удачи!
Подскажите, как можно сделать так, чтобы не было возможно закрыть — это окно. Это для ослика 6.
Ярослав.
Для начала нужно убрать кнопку закрытия, в javascript находите строку отвечающую за вывод этой самой кнопки:
// Добавить кнопку "Закрыть" в наше окно, прописываете прямой путь к картинке$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close" rel="nofollow"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');
Из него необходимо вырезать часть кода:
prepend('<a href="#" class="close" rel="nofollow"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>')Не переусердствуйте и не удалите весь раздел, иначе окно не будет выводиться.
Чтобы убрать возможность закрытия при клике вне области окна, необходимо удалить функцию отвечающую за это:
//Закрытие окна при клике по слою затемнения
$(‘a.close, #fade’).live(‘click’, function() {
$(‘#fade , .popup_block’).fadeOut(function() {
$(‘#fade, a.close’).remove();
}); //fade them both out
return false;
});
//Закрытие окна при клике по слою затемнения
$(‘a.close, #fade’).live(‘click’, function() {
$(‘#fade , .popup_block’).fadeOut(function() {
$(‘#fade, a.close’).remove();
}); //fade them both out
return false;
});
Все, ваше окошко будет закрываться только при перезагрузке страницы, что очень раздражает любого вменяемого пользователя, так что, а надо ли мудрить ))))
Спасибо за ответ. Нужно для IE6, то есть для заглушки. А если кнопкой «Esc», окно закроется?
Нет, кнопкой «Esc» окно не закроется, а вот «F5» пока никто не отменял, да и всегда можно свалить со страницы))))
При чем здесь IE6 и заглушка, так и не въеду, подправив javascript, окно не будет закрываться во всех браузерах на стороне пользователя.
Дело ваше, но лично я негативно отношусь к сайтам где применяются всплывающие окна, особенно подгружаемые на автомате, а если еще и без возможности закрытия, все, черный список для такого сайта обеспечен.
По теме всплывающих окон, можете посмотреть еще одно интересное решение: Стабильный всплывающий блок при прокрутке страницы
Спасибо большое за статью! Только вопрос — как реализовать, чтобы модальное окно сразу выводилось при загрузке странички? Нужно сделать для оповещения клиентов на сайте.
PROman Вам скорее будет лучше обратить внимание на другой скрипт Стабильный информационный блок при прокрутке страницы
Удачи!
Здравствуйте,уважаемый driver. Не могли бы вы подсказать как сделать так, чтобы после закрытия окна с видеороликом (в примере — с ледниковым периодом), воспроизведение видео прекращалось.
Допишу, что возможно решил проблему (может кому-то пригодится). Т.к. только что нашел некий скрипт Jqvideobox, работающий в модальном окне и реализованный также на jQuery. На первый взгляд то что нужно. Буду пробовать.
Здравствуйте! Не могу разобраться с этим:
Включение Popup с JQuery
Куда код из статьи ниже не могу понять…(
К сожалению проблема не решена, т.к. данный скрипт (Jqvideobox) не поддерживает видео из vk.com (поддерживает только из vkontakte.ru, а он переехал на .com). Как остановить воспроизведение видео ума не приложу, может — сделать какое-нибудь переключение на другой видеоролик без звука, который и будет воспроизводиться после закрытия модального окна?
Подскажите, возникта следующая проблема с кнопкой закрытия окна.
img.btn_close — в стилях дописал background: url (‘…/img/close.png’) no-repeat; — кнопка моя показывается но поверх нее еще показывается системная кнопка (надпись close и граница выделена, не знаю как объяснить, обычно такое возникает(внешне) когда браузер не находит картинку и рисует выделенную для нее область и ставит красный крестик) — все это у меня поверх моей картинки…
Алексей
В стилях ничего дописывать не надо, вывод кнопки закрытия окна прописан непосредственно в javascript jQuery строка:
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close" rel="nofollow"><img src="close_pop.png" class="btn_close" title="Закрыть окно" alt="Закрыть" /></a>');У вас получается дублирование, да к тому же в вашем случае, картинка не подключается через стили, так как некорректно прописан путь до картинки, отсюда итог — браузер не находит картинку и рисует выделенную для нее область, и ставит красный крестик.
Через стили вы можете изменить расположение кнопки, все остальное делает javascript. Вид самой кнопки можете поменять на свой, заменив картинку close_pop.png на другую с сохранением имени.
Сказать Вам «огромное спасибо» это ничего не сказать. Ребята работа проделанная Вами просто огромна. Низкий Вам поклон и и еще больше полезных статей и уроков.
Семен. Спасибо вам за внимание к статье и за отзыв.
Извините, куда писать последний блок кода «Включение Popup с JQuery»?
А, поняла между
.
Спасибо огромное за замечательное модальное окно.
Здравствуйте, подскажите пожалуйста как сделать чтобы при закрытии модального окна видео останавливалось, а то на фоне остаётся звук из этого видео, что не очень удобно для посетителей сайта.
Здравствуйте.
В исполняемом скрипте необходимо добавить одну строчку document.location.reload ();
В коде это в самом конце, будет выглядеть так:
//Закрыть всплывающее окно и слой затемнения
$(‘a.close, #fade’).live(‘click’, function() { //При нажатии окно и слой затемнения закрываются
$(‘#fade , .popup_block’).fadeOut(function() {
$(‘#fade, a.close’).remove();
document.location.reload();//При нажатии видео и окно закрываются
});
return false;
});
});
//Закрыть всплывающее окно и слой затемнения
$(‘a.close, #fade’).live(‘click’, function() { //При нажатии окно и слой затемнения закрываются
$(‘#fade , .popup_block’).fadeOut(function() {
$(‘#fade, a.close’).remove();
document.location.reload();//При нажатии видео и окно закрываются
});
return false;
});
});
а как передать в окно переменную из php «’.$row[id].’»
Событие .live () в версии JQ 1.9.1 уже не поддерживается (рекомендуется использовать .on ()), окошко не закрывается. Но если использовать версию 1.4.1 (как в примере) — все работает.
Спасибо.
Спасибо за подсказку, обязательно учту при следующем обновлении.
Всем привет!
Кто знает, что надо добавить в java, что-бы это окно закрывалось ещё и при нажатии кнопки «Escape» на клавиатуре?
Здравствуйте! Подскажите пожалуйста, как добавить скрол к fade?
Доброй ночи!
driver, есть вопрос)))
Можно это окно сделать на джумле2.5???
Боюсь экспериментов, поэтому спрашиваю. Уже был печальный опыт с установкой плагина
Спасибо.
Ночи доброй!
Сделать с этим окном можно всё, в том числе и прикрутить к джумле, вордпресу, и другим движкам. Главное в этом слово «прикрутить» и никак иначе, так как, это не специальный плагин или модуль, для какой либо CMS. Придется поработать руками и расковырять парочку файлов шаблона(темы). Если отсутствует понимание того что вы делаете, лучше воспользоваться готовыми решениями и спать спокойно, а набравшись опыта, и забив на страх, можно обратить свой незатуманеный взор, и на свободные разработки, вроде этого модального окна.
Удачи!
Как приятно, что опять быстро ответили
родные плагины джумлы не хотят нормально работать, а я и еще туда вставила форму обратной связи)))
Рискну сделать ваше окно на тестовом сайте, только он на локалке.
Кстати на Bloggere встало на ура, но с вашей помощью (если помните) )))))))))))))))! Спасибо!
driver!
Спасибо!
Если что,…опять напишу)))
Добрый день driver!
Хорошее окно, но! У меня такая ситуация.
Делаю все по порядку, картинку на кнопку поставила свою с сохранением имени, стили и скрипт все нормально и окно открывается.
Затем, например хочу в окне изменить текст. К примеру в сообщении с кнопками вставляю в окно стили css или просто инфу)и ВСЕ! Больше окно не проявляется. Пока просто копирую все ВАШИ данные в сообщение и публикую, то все хорошо. А потом беда.
Проверила несколько раз на все наличие и скриптов и стилей и Chrome обновила и комп почистила.
(мой блог на реконструкции. Для просмотра пока не открыт).
Может подскажите как решить проблему. Надеюсь на ответ.
Спасибо!
День добрый Marina!
Не видя конкретно то что вы делаете, какие изменения вносите в структуру окна, трудно что-либо подсказать. В данное время, сию минуту, всячески изгалялся над содержанием во всех модальных окнах, вставлял текст, ссылки и примеры исходного кода. Все работает и отображается отлично. Пожалуйста проверьте, все ли вы правильно делаете, так как именно с этим модальным окном, мало у кого возникают хоть какие то проблемы. Будет возможность показать ваши эксперименты, показывайте, обязательно разберем все ошибки.
Удачи!
PS: Если вставляете в окно код стилей css, то не заключайте его в теги
<style> и </style>
<style> и </style>
В этом случае вас ожидает девственная чистота:))
Доброй ночи driver!
Никак не ожидала такого быстрого ответа. Спасибо Вам за оперативность.
Все перепробовала, но результат такой же. Не понимаю почему, но именно в сообщении ( когда пишешь) нельзя редактировать. Выношу в файл блокнота, там редактирую для себя ( цвет, фон, шрифты и т д) и только потом, готовый результат копирую в сообщение ничего там не исправляя. Тогда работает.
Но опять же, как только что-то тронешь в самом черновике в Blogger — ВСЕ! Окно не отображается.
Неужели только у меня такой глюк?!
Постараюсь завтра сделать это на тестовом блоге и напишу ссылку здесь. Надеюсь на ответ.( Перед отправкой этого сообщения проверила еще раз: изменила цвет фона и тени в самом сообщении черновика Blogger и обновила публикацию. НОЛЬ!)
Спасибо!
А особенное спасибо за это : «…показывайте, обязательно разберем все ошибки.»
)))
Доброй ночи driver!
Проблема осталась.
Первое. «Тупо» копирую ваши данные для окна к себе в сообщение – окно открывается.
Второе. Открываю для редакции это сообщение и на пустом пространстве щелкаю мышкой ( не говорю уже что-то исправлять)
— ВСЕ! Окно не открывается.
Вот ссылка на тестовый блог.
переход с главной на кнопку предыдущее.
Может есть мысли как исправить это безобразие?
Надеюсь на ответ
Спасибо!
Marina
Ответил по почте, проверьте E-mail…
Друзья, подскажите пожалуйста, есть проблеммка. Пытаюсь поставить окно на сайт, и сталкиваюсь с такой проблемой, окно открывается, но задний фон перекрывает все что там есть, то есть сам fade закрывает окно, по всей видимости, соответственно ничего не работает, как исправить ошибку??
Здравствуйте! Подскажите, пожалуйста, как сделать чтобы при нажатии на дополнительную (не та что в верху справа) кнопку «Закрыть» окно исчезало. Спасибо!
Здравствуйте!
Если я вас правильно понял, то очень просто. Например, располагаете любую кнопку или текстовую ссылку внутри окна, ну скажем, в конце сообщения, прописываете к кнопке(ссылке) атрибуты, такие же как у стандартной кнопки закрытия.
<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.
Вы всегда терпеливо отвечаете и не требуете за это оплату.
Большое вам человеческое спасибо!
НО )))))
Есть еще вопрос жизненно важный ( тоже напишу в личку попозже)
Когда вернусь обновлять свой блог прямые ссылки на ваш сайт. Вы лучший МАСТЕР своего дела.
Добрый день!
А как сделать так, чтобы при нажатии на ссылку, новая страница(контент) открывалась в модальном окне на текущей странице?
Поместить в модальное окно содержание нужной вам страницы через фрейм:
<iframe src=”http://ваша страница.html” width=”500″ height=”500″></iframe>
<iframe src=”http://ваша страница.html” width=”500″ height=”500″></iframe>
Определяете необходимые ширину и высоту фрейма
width="500" height="500"и подгоняете под него нужное вам окно в атрибутеhref="#?w=550"ссылки на вызов окна:<a href=”#?w=550″ rel=”popup1″ class=”poplight” rel=”nofollow”>Окно – Ширина = 550px</a>
<a href=”#?w=550″ rel=”popup1″ class=”poplight” rel=”nofollow”>Окно – Ширина = 550px</a>
Полосы прокрутки добавляются автоматически. Всё вместе у вас получится примерно такая конструкция в html:
<!– Ссылка на вызов модального окна –>
<a href=”#?w=550″ rel=”popup1″ class=”poplight” rel=”nofollow”>Окно – Ширина = 550px</a>
<!– Модальное окно с содержанием –>
<div id=”popup1″ class=”popup_block”>
<iframe src=”http://страница.html” width=”500″ height=”500″></iframe>
</div>
<!– Ссылка на вызов модального окна –>
<a href=”#?w=550″ rel=”popup1″ class=”poplight” rel=”nofollow”>Окно – Ширина = 550px</a>
<!– Модальное окно с содержанием –>
<div id=”popup1″ class=”popup_block”>
<iframe src=”http://страница.html” width=”500″ height=”500″></iframe>
</div>
В таком виде у вас будет появляться модальное окно шириной 550px с содержанием страницы заданной в
iframe, высота подгоняется автоматом в соответствии размера содержания и, с учетом предустановленных в css отступов.Спасибо, получилось, только вот вопрос, а можно сделать чтобы в модальном окне выводился только страницы, без header-а и footer-а?
Здравствуйте!
Уважаемый driver, подскажите пожалуйста, вставил в ваше модальное окно форму и сделал ссылку на кнопку для открытия, но почему-то окно открывается при загрузке страницы, что нужно прописать в скрипте чтобы открывалось только по нажатию кнопки?
Извините за беспокойство, нашёл ошибку. Спасибо Вам за модальное окно. Успехов Вам!
Пожалуйста. Рад что у вас всё получилось)))
Блин, driver, подскажите где найти модальное окно, может попадалось вам на просторах инета, перепробовал уйму, у всех окна не модальные, под ними скролится основной контент. А нужно чтоб сайт под окном не скролился. Типа как вконтакте в фейсе. Спасибо.
Здраствуйте driver, а что с моим комментом что то было не так?
Здравствуйте, Андрей. Извините за задержку с ответом. С вашим комментом всё так )) просто иногда мы предполагаем, а… Теперь, по самому вашему комментарию, цитирую:
нужно чтоб сайт под окном не скролился
Для того чтобы убрать скролл страницы при открытом окне, достаточно в наш winmodal.js добавить одну строку:
$(“body”).css({“overflow”:”hidden”});
$(“body”).css({“overflow”:”hidden”});
Добавлять эту строчку следует в раздел затемнения фона, сразу после строки:
$(‘body’).append(‘<div id=”fade”></div>’);
$(‘body’).append(‘<div id=”fade”></div>’);
Надеюсь смог вам помочь, хоть и с опозданием.
Здравствуйте,driver,у меня такая проблема: рядом с кнопкой «закрыть» находится кнопка с изображением битой картинки. Как от этого избавиться?
Здравствуйте, Сергей.
Даже не представляю, как это может быть, если картинка отображается, значит путь до неё в скрипте прописан правильно, других картинок кнопки закрытия просто быть не должно, если конечно вы не прописали напрямую в html какую-то другую картинку.
Здравствуйте ,driver. Поставил данный скрипт, все отлично работает, лучший что я находил, однако появилась проблема, перестал работать другой скрипт(lightbox) использующий библиотеки jquery . Как я понимаю нужно куда то прикрутить jQuery.noConflict в ваш скрипт. Можете помочь ? Заранее спасибо.
Спасибо я разобрался
Помогииите, пожалуйста!
Почему у меня не выполняется код?! Я все правильно скопировал на сайт (еще раз перепроверил), но при нажатии на ссылку ничего не происходит, он только, кажется страницу перезагружает. Помогииите! Пожалуйста!
Разобрался. Оказывается я просто поместил HTML-код внутрь маленького блока.
Ну и славненько))))
Окно появляется но не работает кнопка закрыть
Добрый день!
В header-e шаблона opencart есть следующее:
Туда же, в хедер, вставляю див с модальным окном или формой,
Заголовок
Любой текст,что душе угодно
Но в обоих случаях оно торчит на странице видимым куском, а не появляется по клику на картинку… Что-то я упустил, а что — не могу понять…
Доброго всем здоровица. У меня наверное дебильный вопрос, просто я в это деле новичёк.
У меня сайт работает на движке Модекс. В нём следующая структура:
Шаблоны
Дополнительные поля
Чанки
Сниппеты
Плагины
Категории
Я хочу создать страницу, на которой я бы выставил в ряд видеоролики(тумбы), и чтобы при нажатии они открывались в модальном окне с разрешением например 500.
Я создал чанк, например ,в нём вверху прописал например:
См. Окно в действии — Ширина = 500px
затем ниже
Заголовок
Любой текст,что душе угодно
затем в стили прописал ваш код
В нужное мне место на сайте я подключил этот чанк, но
куда прописывать
//Когда вы нажмете на ссылку с классом poplight и HREF начинается с a #
$(‘a.poplight[href^=#]’).click(function() {
var popID = $(this).attr(‘rel’); //Get Popup Name
var popURL = $(this).attr(‘href’); //Получить Popup 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=”#” rel=”nofollow”></a>’);
//Определяет запас на выравнивание по центру (по вертикали по горизонтали)мы добавим 80px к высоте / ширине, значение полей вокруг содержимого (padding) и ширину границы устанавливаем в CSS
var popMargTop = ($(‘#’ + popID).height() + 80) / 2;
var popMargLeft = ($(‘#’ + popID).width() + 80) / 2;
//Устанавливает величину отступа на Popup
$(‘#’ + popID).css({
‘margin-top’ : -popMargTop,
‘margin-left’ : -popMargLeft
});
//Постепенное затемнение фона
$(‘body’).append(”); //Добавляем fade тегу body.
$(‘#fade’).css({‘filter’ : ‘alpha(opacity=80)’}).fadeIn(); //Постепенное исчезание слоя – .css({‘filter’ : ‘alpha(opacity=80)’}) используется для фиксации в IE , фильтр для устранения бага тупого IE
return false;
});
//Закрыть всплывающие окна и затемненный фон
$(‘a.close, #fade’).live(‘click’, function() { //При нажатии на кнопку или затемненный фон.
$(‘#fade , .popup_block’).fadeOut(function() {
$(‘#fade, a.close’).remove();
});
return false;
});
});
//Когда вы нажмете на ссылку с классом poplight и HREF начинается с a #
$(‘a.poplight[href^=#]’).click(function() {
var popID = $(this).attr(‘rel’); //Get Popup Name
var popURL = $(this).attr(‘href’); //Получить Popup 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=”#” rel=”nofollow”></a>’);
//Определяет запас на выравнивание по центру (по вертикали по горизонтали)мы добавим 80px к высоте / ширине, значение полей вокруг содержимого (padding) и ширину границы устанавливаем в CSS
var popMargTop = ($(‘#’ + popID).height() + 80) / 2;
var popMargLeft = ($(‘#’ + popID).width() + 80) / 2;
//Устанавливает величину отступа на Popup
$(‘#’ + popID).css({
‘margin-top’ : -popMargTop,
‘margin-left’ : -popMargLeft
});
//Постепенное затемнение фона
$(‘body’).append(”); //Добавляем fade тегу body.
$(‘#fade’).css({‘filter’ : ‘alpha(opacity=80)’}).fadeIn(); //Постепенное исчезание слоя – .css({‘filter’ : ‘alpha(opacity=80)’}) используется для фиксации в IE , фильтр для устранения бага тупого IE
return false;
});
//Закрыть всплывающие окна и затемненный фон
$(‘a.close, #fade’).live(‘click’, function() { //При нажатии на кнопку или затемненный фон.
$(‘#fade , .popup_block’).fadeOut(function() {
$(‘#fade, a.close’).remove();
});
return false;
});
});
Спасибо за ответ
Код, что вы привели в комментарии, это содержимое исполняемого плагина jQuery. Заключите его в
<script type="text/javascript">.....</script>, получится должно следующее:<script type=”text/javascript”>
$(document).ready(function(){
//При нажатии на ссылку с классом poplight и href с a #
$(‘a.poplight[href^=#]’).click(function() {
var popID = $(this).attr(‘rel’); //Получить имя popup
var popURL = $(this).attr(‘href’); //Определить размер popup из 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” rel=”nofollow”></a>’);
//Определяет запас на выравнивание по центру (по вертикали по горизонтали)мы добавим 80px к высоте / ширине, значение полей вокруг содержимого (padding) и ширину границы устанавливаем в 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>’); //Добавляем слой затемнения.
$(‘#fade’).css({‘filter’ : ‘alpha(opacity=80)’}).fadeIn(); //Постепенное исчезание слоя – .css({‘filter’ : ‘alpha(opacity=80)’}) используется для фиксации в IE, фильтр для устранения бага тупого IE
return false;
});
//Закрыть всплывающее окно и слой затемнения
$(‘a.close, #fade’).live(‘click’, function() { //При нажатии рядом, окно и слой затемнения закрываются
$(‘#fade , .popup_block’).fadeOut(function() {
$(‘#fade, a.close’).remove();
});
return false;
});
});
</script>
<script type=”text/javascript”>
$(document).ready(function(){
//При нажатии на ссылку с классом poplight и href с a #
$(‘a.poplight[href^=#]’).click(function() {
var popID = $(this).attr(‘rel’); //Получить имя popup
var popURL = $(this).attr(‘href’); //Определить размер popup из 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” rel=”nofollow”></a>’);
//Определяет запас на выравнивание по центру (по вертикали по горизонтали)мы добавим 80px к высоте / ширине, значение полей вокруг содержимого (padding) и ширину границы устанавливаем в 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>’); //Добавляем слой затемнения.
$(‘#fade’).css({‘filter’ : ‘alpha(opacity=80)’}).fadeIn(); //Постепенное исчезание слоя – .css({‘filter’ : ‘alpha(opacity=80)’}) используется для фиксации в IE, фильтр для устранения бага тупого IE
return false;
});
//Закрыть всплывающее окно и слой затемнения
$(‘a.close, #fade’).live(‘click’, function() { //При нажатии рядом, окно и слой затемнения закрываются
$(‘#fade , .popup_block’).fadeOut(function() {
$(‘#fade, a.close’).remove();
});
return false;
});
});
</script>
Затем разместите эту конструкцию в подвале вашего шаблона, перед тегом
</body>С модекс знаком поверхностно, так что со структурой шаблонов, вам придётся разбираться самостоятельно
Автор крут молодец, что скачать можно
Здравствуйте. Статья написана очень толково, но мне как новичку некоторые моменты не совсем понятны. У меня на странице много миниатюр картинок, большой размер которых нужно открыть в модальном окне. Где мне разместить ссылку на большие картинки? Иначе у меня открывается просто пустое окно. Заранее спасибо за ответ.
Здесь:
<div id="popup_name" class="popup_block">Сюда картинку....
</div>
Только вряд ли именно такое модальное окно вам нужно, большое количество картинок, такое же большое количество разных размеров, эти окна больше для информационного разового содержания, а не для организации полноценной галереи. Существует много готовых решений и не обязательно на jQuery. Например такое: тынц или целая коллекция галерей Ну, и на конец это: тынц
Огромное спасибо за совет 🙂 Всё получилось 🙂
Спасибо! Буду пробовать сейчас.
Как раз стоит задача сделать вывод видео с ютуба мелкими миниатюрами с всплывающим окном для показа в развернутом режиме на ½ экрана.
За отзыв спасибо.
При использовании видео, не забывайте, что «кашерное» во всех отношениях решение остановки ролика при закрытии окна, пока ещё отсутствует, при необходимости используется тупо перезагрузка страницы, что конечно же не есть хорошо.
То же самое и с модальным блоком видео на чистом CSS
Подскажите, есть ли возможность вставить это окно и что бы оно автоматически открылось 1 раз для вошедшего на сайт и записалось в куках. И при обновлении странички что бы оно не появлялось? уж очень нравиться окошко
Посмотрите вот эту статью и прочитайте комментарии к ней, там всё есть по вашему вопросу.
Не работает с подгрузкой данных через ajax.
Берет данные изначалього divа, а потому уже не центруется.
Здравствуйте, Влад.
Думается мне, что вы слишком требовательны к такому простейшему скрипту, изначально заточенному под довольно скромный функционал, расширять который у меня нет ни времени и особо острого желания. Да и нигде, ни слова в статье не сказано о возможности подгрузки данных через ajax. Всегда существует альтернатива, в конце концов есть масса настоящих «комбайнов», которые загрузят и подгрузят вам всё что угодно, и откуда угодно.
Спасибо за проявленный интерес, найдёте решение, буду рад если отпишитесь, что да как.
Удачи!
здравствуйте… можно ли это окно использовать для каталога…? на странице 12 div — блоков. в каждом блоке есть ссылка — подробнее… можно ли подключить все блоки ?
Здравствуйте, Александр.
Предусмотрена возможность использования неограниченного количества модальных окон. Главное следите за правильной связкой атрибута
relссылки активации окна и уникального идентификатораidсамого модального div-контейнераТак если в ссылке
rel="popup-1"она откроет окно сid="popup-1", и так далее, при добавлении очередного модального окна (popup-2, popup-3 и т.п…)Это если я вас правильно понял)))
спасибо… клевый код…
Добрый день.
подскажите как в цикле вывести ссылки с окнами, только по каждой ссылке будет открываться вкладка с соответствующими данными
for($q=0;$q<count($ideas_id);$q++){
<div id="popup_name" class="popup popup_block">
<h2><?=$ideas_name[$q];?> </h2>
<p>Любой текст,что душе угодно</p>
</div>
}
Забадалсся на вордпресс вставлять. Можно конкретно что и куда) Большое спасибо за помощь за ранее!
В общем при подключении
Окно работает, но пропадает меню сайта. Если не прописывать выше изложенный скрипт, то окно не работает.
Как быть подскажите…
Здравствуйте, Stanislav.
Скорее всего у вас в теме присутствует какой-либо из элементов(то же меню, почему бы и нет), в работе которого необходима библиотека jQuery. WP автоматом подтягивает свою версию.
Вы в свою очередь, следуя написанному в статье, для работы модального окна прописываете свою. Возможен банальный конфликт библиотек.
Не знаю какая у вас тема, но в WP предусмотрен механизм безопасного подключения скриптов и jQuery в частности. Проверьте файл functions.php вашей темы на наличие такой функции:
function jquery_init() {if (!is_admin()) {
wp_enqueue_script('jquery');
}
}
add_action('wp_enqueue_scripts', 'jquery_init');
Если отсутствует, что скорее всего, попробуйте прописать. Делается это для того чтобы избежать конфликт библиотек. Или же не подключайте дополнительную версию:
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js”></script>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js”></script>
как расписано в статье.
Сам плагин, исполняемый js (см. фарш в статье) прописываете в файле темы footer.php в районе закрывающего тега
</body>, предварительно обернув в<script type="text/javascript">..фарш js..</scrip>, это если не подключаете отдельным файлом dm-modal.jsНе видя пациента трудно его лечить ))), Надеюсь всё у вас получится.
Здравствуйте.
Хорошее всплывающее окошко и пользоваться удобно, но вот с jQuery v2.2.4 не работает.
Можно как-то поправить это или может будет новая версия данного скрипта?
Спасибо.
Здравствуйте, Павел.
В jQuery v2.2.4 больше не поддерживается синтаксис
href^=#, чтобы всё работало необходимо заменить его наhref*=\\#. Для этого в файле dm-modal.js найдите строку:$('a.poplight[href^=#]').click(function()и просто замените в ней
a.poplight[href^=#]наa.poplight[href*=\\#]Ну, а я в свою очередь внесу изменения в статью, в демо и в архив с исходниками, так что вам спасибо за наводку, а то что-то давно не обращался к данному скрипту и не обновлял.
Здравствуйте, отличный скрипт, спасибо огромное! Но у меня вопрос, не удается привязать к каждому модальному окну свой уникальный адрес. Что бы при клике на окошко, в адресной строке отображался его адрес, и человек мог скопировать его, переслать, и при открытии ссылки сразу открывалась страница с развернутым окном. Как это реализовать, подскажите коль не затруднит. Заранее благодарен!
Я как бы врубаюсь что это через history.pushstate делается, но конкретно к этому примеру не могу применить. Кто поможет, отблагодарю. Маякните на почту 2015500@rambler.ru