Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

Модальное окно с помощью CSS и jQuery

Рассказывая о различных техниках сайтостроения, было бы нелепо не рассказать, о некоторых способах создания модальных окон. О назначении, полезности и возникающих проблемах использования всплывающих, модальных окон мы рассуждать не будем. Разберем лишь один из многочисленных примеров создания таких окошек.
Бывают ситуации когда нет возможности использовать специальные плагины, например такие как fancybox и prettyPhoto, поэтому стоит понять, как можно создать свое собственное .
 
Модальное окно на jQuery

Давайте посмотрим, как это сделать:

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 края окна, вычислить необходимый размер, это как раз задача для .

#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 и поделитесь ссылкой на запись в своих соц-сетях:

Всего комментариев: 174

  • Андрей: 21 сентября, 2010 в 18:29

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

    Ответить
    • driver: 22 сентября, 2010 в 11:47

      Рад что пригодилось, за отзыв спасибо.
      Изучение различных техник, процесс увлекательный и практически нет предела совершенству.

      Ответить
  • Sasha: 29 октября, 2010 в 04:32

    Вещь! То что надо! Спасибо!

    Ответить
  • inVision: 15 марта, 2011 в 17:32

    Да… симпотичная статейка 🙂 Спасибо!

    Ответить
  • Александр: 14 апреля, 2011 в 17:23

    Подскажите пожалуйста как подгружать содержимое модального окна из внешнего файла.

    Ответить
  • Алексей: 16 августа, 2011 в 16:44

    Спасибо за скрипт, очень помог. Вот только столкнулся с проблемой, при внедрении на сайт. Подскажите, пожалейста, я хочу сделать слайдер в модальнике. Слайдер тоже на jquery, селекторы, названия классов и айдишников не пересекаются, функций тоже. А задумка интересная, слайдер не для фотографий, а для «типа новостей». Кликаешь на иконку на карте и открывается попап с слайдером, в котором будут объекты перелистываться (объекты будут соответствовать определенным новостям). Может подскажите какое-нибудь решение? Буду очень признателен:)

    Ответить
    • driver: 16 августа, 2011 в 20:28

      Алексей Спасибо за комментарий.
      Как я понял вам нужен слайдер или попросту листалка для контента, для интеграции в модальное окно. Можете посмотреть здесь , простой в исполнении и довольно шустро работающий. Еще с десяток плагинов jQuery здесь: Тынц, ну и на конец широкоформатный слайдер Тут

      Ответить
  • Алексей: 16 августа, 2011 в 17:43

    Подскажите пожалуйста, как или какой слайдер лучше подргрузить внутрь модального окна? Может кто сталкивался с таким?

    Ответить
    • driver: 16 августа, 2011 в 21:46

      Нашел для вас Алексей, по моему подходящий вариант Ротатор контента, правда у буржуинов , но думаю разберетесь, в модальное окно встраивается очень просто. Качаете скрипт, прописываете на странице пути и встраиваете структуру ротатора в модальное окно, фон и размер блока ротатора подгоните под окно, сделал пример можете посмотреть Здесь, отталкиваясь от исходников моего примера все у вас получится.
      Удачи.

      Ответить
  • Алексей: 17 августа, 2011 в 10:22

    Невероятно благодарен за подсказку! Я и не надеялся за такую оперативность! Сейчас буду переваривать всю информацию:) Как получится результат попробую похвастаться, если конечно еще получится, правда еще проблема на сайте, надо сделать кривые линии, которые будут масштабироваться. Списался с С.Чикуенком, он когда то делал такое на сайте газпрома, взял библиотеку, осталось мелочь — внедрить:) Так что обязательно потом покажу результат. Еще раз спасибо!

    Ответить
    • driver: 17 августа, 2011 в 14:55

      Спасибо Алексей за отзыв.
      С вашей подачи написал полноценную статью об интеграции ротатора контента в модальное окно, если интересно: Читайте

      Ответить
  • Алексей: 18 августа, 2011 в 13:25

    Рад что тоже смог чем то помочь:)

    Ответить
  • Алексей: 18 августа, 2011 в 14:56

    Блин, у меня руки не от тудого растут и голова пустовата. Могу я вас попросить о помощи? Насчет ротатора статья очень понравилась, но правда я пытаюсь добиться немного другого эффекта. Пытаюсь сейчас соединить ваше модальное окно и простенький, но удобный слайдер, кстати говоря от тогоже буржуя, что и ротатор:) Кстати он довольно функционален, так что думаю что такая заготовка может много кому пригодиться…

    Ответить
    • driver: 18 августа, 2011 в 21:04

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

      Ответить
  • Алексей: 19 августа, 2011 в 06:40

    Уважаемый driver, не знаю как вас зовут, но знаю точно, вы хороший человек. Я буду очень благодарен за помощь!
    Думаю что для пользователя самым оптимальным сладером будет 4, который с автоскролом (но это регулируется) и не исчезающими кнопками.
    P.S.
    С радостью списался с вами бы через почту, для ЛС. Надеюсь на дальнейшее сотрудничество:) (почта должна быть в коменте)

    Ответить
    • driver: 19 августа, 2011 в 20:01

      Алексей, пишите через форму контактов, которая находится Здесь, а дальше разберемся 🙂
      Слайдер взял в обработку, надеюсь что — нибудь наковыряю …

      Ответить
  • Алексей: 19 августа, 2011 в 06:42

    Я из Новосибирска и у меня еще есть еще одна очень интересная скажем так библиотека, которая сейчас очень актуальна, хотел бы предложить разобраться с ней вместе!

    Ответить
  • Алексей: 22 августа, 2011 в 14:03

    У меня почему-то слайдинг не работает, а отладчик ошибок не выдает, я прямо в тупике…

    Ответить
    • driver: 22 августа, 2011 в 18:05

      Алексей, здравствуйте.
      Поместил слайдер в модальное окошко, но использовал jQuery тот же что и в ротаторе контента, с родным никак не хотел работать. Кнопки навигации слайдера опустил, так как они оригинальной формы и не вписываются в окно, а без них уже не очень удобно для пользователей.
      В общем смотрите: Здесь, если смог помочь, буду рад.
      Удачи!

      Ответить
  • Алексей: 23 августа, 2011 в 07:44

    Клево, всетаки в библиотеке дело было… А вот насчет кнопок с вами не согласен. Автоматическим ротатором мы принуждаем пользователя в смене контента, причем без возможности вернуться на предыдущий, а это не правильно. Так что попробую сейчас доработать… Огромная благодарность за внедрение!:)

    Ответить
    • driver: 24 августа, 2011 в 00:08

      Алексей про кнопки я написал , цитирую:
      без них уже не очень удобно для пользователей.
      Я не сомневался, что у вас все получится, ну и хотелось бы как — нибудь при случае взглянуть на результат.
      Удачи!

      Ответить
  • Алексей: 23 августа, 2011 в 12:36

    Я наконец то решил проблему интеграции. Почему то через java не получается определить ширину объекта, поэтому пришлось определить ее однозначно и вуаля, все заработало!

    Ответить
  • Михаил: 25 августа, 2011 в 08:05

    К сожалению не работает данный скрипт в IE 8

    Ответить
    • driver: 25 августа, 2011 в 14:52

      Михаил
      IEшка много крови попортил, не идет в 8й версии, есть кнопочка обновления браузера до 9й версии, в ней все работает прекрасно. Вся фича в том, что много, ох как много людей-человеков продолжают путешествовать по «нету» не снявшись с тормозов, пользуя IEшку дремучих версий. Выбор всегда за вами, использовать скрипт у себя, теряя процент IEшко — поклонников, смотреть в будущее, пробовать новые решения или же находить компромиссы, добиваться кроссбраузерности, того или иного нововведения.

      Ответить
  • Алексей: 26 августа, 2011 в 06:44

    Я только не понял, что не работает в ИЕ8?

    Ответить
    • driver: 27 августа, 2011 в 12:18

      в ИЕ8 все работает, может Михаил в версиях заблудился … ;)))

      Ответить
  • Константин: 6 сентября, 2011 в 16:50

    Это самая лучшая статья по модальным окнам которую я нашел за последние два дня… Спасибо вам, за такой труд… Появилось желание глубже изучать jQyery. Спасибо Вам.
    Поддерживаю!

    Ответить
  • Роман: 9 сентября, 2011 в 09:38

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

    Ответить
    • driver: 9 сентября, 2011 в 10:23

      Роман здравствуйте!
      Спасибо за интерес к статье, а на счет полосы прокрутки, как то не задавался целью, но почему бы и нет, обязательно проработаю этот момент.
      К тому же, прячется кнопка закрытия, из-за чего модальное окно не закрывается.
      Для закрытия окна достаточно кликнуть вне окошка в любом месте страницы :)))

      Ответить
  • Роман: 9 сентября, 2011 в 10:51

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

    Ответить
    • driver: 9 сентября, 2011 в 11:08

      Роман.
      Полосу прокрутки вставил в окошко по простому без лишних выкрутасов, пример кода скину вам на почту.
      Плагин форматирования комментов пользую WP Comment Quicktags Plus — расширенная русская версия

      Ответить
  • Роман: 9 сентября, 2011 в 14:20

    Полосу прокрутки вставил в окошко по простому без лишних выкрутасов, пример кода скину вам на почту.
    Шикарно получилось. Премного благодарен.
    Плагин форматирования комментов пользую WP Comment Quicktags Plus — расширенная русская версия
    За это отдельное спасибо. Где тут у вас кнопочки социальных сетей?))

    Ответить
    • driver: 9 сентября, 2011 в 14:25

      Роман.
      Ваши комментарии подтолкнули меня на написание отдельной статьи по теме, так что и вам спасибо)))
      Где тут у вас кнопочки социальных сетей?
      Можете твитнуть, плюсануть, подписаться на ленту, кинуть в закладки, все на виду)))
      Удачи!!!

      Ответить
  • ЯТП-0.25: 13 октября, 2011 в 15:41

    отличное объяснение. нашел как раз, что искал 🙂

    Ответить
  • Юля: 17 ноября, 2011 в 13:57

    Мужик!!!ты просто гений!!!я два дня не могла модифицировать другие окна, а с некоторыми был просто пипец… Твой код легкий как для применения, так и для модифицирования! спасибо!!!

    Ответить
    • driver: 17 ноября, 2011 в 14:18

      Юля.
      Большое спасибо за отзыв, заглядывайте почаще, буду только рад.

      Ответить
  • john: 17 ноября, 2011 в 20:48

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

    Ответить
    • driver: 17 ноября, 2011 в 21:51

      john
      Именно эта редакция модального окна не предусматривает возможность перемещения в пределах страницы. Вы можете обратить свое внимание на другой метод, с помощью плагина MooTools для создания модальных окон
      Удачи!

      Ответить
  • john: 19 ноября, 2011 в 03:12

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

    Ответить
  • Читатель: 30 ноября, 2011 в 12:27

    Здравствуйте у меня вопрос Как можно ссылаться на другую страницу с помощью Модального окна «то есть оформить контент на другой странице и вывести его на Модальное окно»
    как???

    Ответить
    • driver: 30 ноября, 2011 в 22:34

      Как поместить контент в модальное окно, подробно расписано в статье. Для наглядности можете посмотреть исходный код демо-страницы, думаю все станет понятно, куда, что и как вставлять. В самом окне можете размещать, как изоображения так и ссылки, на примере все показано. Ссылку на модальное окно оформляете так:
      <a href="#?w=500" rel="nofollow">Ваша ссылка на модальное окно</a>
      Здесь же и устанавливаете размер окна, соответствующий вашим требованиям для размещения контента (href=”#?w=500″ ).

      Ответить
  • Lancy: 6 декабря, 2011 в 14:22

    Подскажите пожалуйста можно внедрить плагин Fancybox в битрикс

    Ответить
    • driver: 6 декабря, 2011 в 22:03

      Lancy
      На сколько я в теме, битрикс поддерживает большое количество своих дополнительных плагинов и модулей, и пожалуй, нет ни каких препятствий к подключению сторонних библиотек javascript jQuery, Fancybox в том числе. Как, это уже другой вопрос, скорее так же, как и в любой другой системе управления сайтом. Тонкостей всего процесса рассказать не могу, потому как тупо не работал с этой системой.
      Надеюсь все у вас получится и спасибо за внимание к статье.

      Ответить
  • Саша: 23 декабря, 2011 в 08:20

    Здравствуйте.
    driver спасибо за статью, пригодилась, скрипт чудо, и всё бы ничего, но параметры иконки закрытия окна поставили в тупик. В других скриптах, том же фенсибоксе эта иконка живёт своей жизнью и связана с окном лишь началом координат. А в данном скрипте иконка привязана к контенту окна. И как я не пытался выставить координаты, ничего не вышло.
    Вопрос, как переписать что ли, скрипт, что бы можно было задавать иконке координаты?

    Ответить
    • driver: 23 декабря, 2011 в 17:02

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

      Ответить
  • Саша: 24 декабря, 2011 в 10:24

    Просто в тех же симплмодал и фенси бокс иконка закрытия более подвижна и можно самому определять где и как ей «стоять». У меня ситуация с несколькими вложенными дивами и тут начинается ерунда, иконка прилипает ко второму диву игнорируя первый (в котором и находятся остальные). Смог выровнять (не задать свободное положение, а именно выровнять, т.к. иконка беспардонно лишь прилипает к диву) по родительскому диву, с помощью
    position:absolute; display:inline;, чудом, но это не выход. Если придётся курочать окно, побаиваюсь что и иконка начнёт плясать.

    Ответить
    • driver: 24 декабря, 2011 в 11:31

      Саша.
      Специально экспериментировал с многоуровневыми вложениями различных блочных элементов, от простейшего ротатора контента, контактной формы до слайдера изображений. Иконка закрытия всегда выводится корректно, согласно заданной позиции.
      Если придётся курочать окно, побаиваюсь что и иконка начнёт плясать.
      В смысле курочить? Изменять размер, внешний вид, цвет фона, все что угодно, от этого расположение иконки закрытия никак не изменится, если конечно вы сами не сочтете нужным изменить ее расположение с помощью изменений в css. «Плясать» иконка уж точно не начнет :)))

      Ответить
  • CyberBlade: 9 марта, 2012 в 00:26

    Спасибо большое, два дня ищу вменяемую инфу по окнам, встречается шлак один с левыми плагинами и непонятными авторами. Действительно лучшая статья на эту тему. Спасибо вам огромное.

    Ответить
    • driver: 9 марта, 2012 в 00:34

      CyberBlade, благодарю.

      Ответить
  • Вавилен Татарский: 12 марта, 2012 в 21:31

    Огромное спасибо!
    Очень просто и удобно!

    Ответить
  • Андрей: 20 марта, 2012 в 10:44

    Уважаемый driver! Не поможете советом начинающему. Есть реализованное окно на jquery.simplemodal OSX. Окно выводиться
    Картинка в шапке сайта. Содержимое окна со скриптами в заключительной части страницы. Можно ли сделать реализацию открытия окна со всех страниц сайта используя только команду открытия (что выше)не прописывая все содержимое на каждой странице. Пробовал в шапке разместить глобальную переменную с полным содержанием, но сайт разваливается.(((:

    Ответить
  • Demonik: 23 марта, 2012 в 06:26

    Здравствуйте!
    Подскажите пожалуйста как в этом модальном окне сделать так, чтобы большой по размеру контент прокручивался а не растягивал модальное окно?

    Ответить
    • driver: 24 марта, 2012 в 01:05

      Demonik просто сделать модальное окно с полосой прокрутки.
      Удачи!

      Ответить
  • Raf: 25 марта, 2012 в 18:33

    А, как сделать чтоб оно само закрывалось ? Внутри окна сделал ссылками выбор региона, при переходе окно не закрывается самостоятельно…

    Ответить
  • Марина: 12 апреля, 2012 в 13:37

    хорошо бы, если бы еще было понятно куда прицепить последний код jquery
    файл отдельный создать или как ссылку на него дать
    кароч — непонятно, а то можно было бы пользоваться

    Ответить
  • Павел: 17 апреля, 2012 в 01:02

    Идеально бы было еще рассказать как это все на свой e-mail отправить. А то форма есть, а механизм отправки не прописан.

    Ответить
  • Павел: 17 апреля, 2012 в 01:03

    Предыдущее сообщение относилось к форме обратной связи в таком модальном окне.

    Ответить
    • driver: 17 апреля, 2012 в 06:58

      Ну дык, и нуна писать коммент именно к той записи. А про механизм отправки почты через форму обратной связи, это совсем другая история и написано про это в «нете» достаточно, зачем повторяться…

      Ответить
  • Сергей: 25 июня, 2012 в 23:26

    Возникли проблемы в 9 IE. Страница длинная, с боковой полосой прокрутки. Затемнение происходит в верху страницы, на первых 100% высоты. Окно размещается там же, по центру. Учитывая то, что окно вызывается ссылкой, которая примерно на 3 экране, то не сразу видно, что после клика вообще что то случилось.
    Ну и для кучи, там же в IE нет крестика закрыть.
    А в мазиле он с border
    Как сделать, что бы в IE затемнялась вся страница целиком? и окно выводилось по центру видимой области, а не где то там далеко вверху.
    Спасибо!

    Ответить
    • driver: 26 июня, 2012 в 00:31

      Сергей, спасибо за интерес к статье. На счет IE9, сразу же проверил работу модального окна на демо-странице в этом горячо мной не любимом браузере. Затемнение работает по всей странице. Специально увеличивал область прокрутки страницы до немыслимых размеров, окно выдается как положено в центре и с полноценным затемнением. Так что извините Сергей, сходу и на уровне телепатии помочь вам не сумею. Ну а крестик закрытия отображается действительно с border, правда не в мазиле, а все в том же тормознутом IEшке. Спасибо за наводку. Специально для этого браузера в стилях для картинки кнопки закрытия img.btn_close добавьте border: 0;.
      Удачи!

      Ответить
  • Ярослав: 4 августа, 2012 в 02:08

    Подскажите, как можно сделать так, чтобы не было возможно закрыть — это окно. Это для ослика 6.

    Ответить
    • driver: 4 августа, 2012 в 16:57

      Ярослав.
      Для начала нужно убрать кнопку закрытия, в 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;
      });

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

      Ответить
  • Ярослав: 5 августа, 2012 в 01:39

    Спасибо за ответ. Нужно для IE6, то есть для заглушки. А если кнопкой «Esc», окно закроется?

    Ответить
  • driver: 5 августа, 2012 в 10:12

    Нет, кнопкой «Esc» окно не закроется, а вот «F5» пока никто не отменял, да и всегда можно свалить со страницы))))
    При чем здесь IE6 и заглушка, так и не въеду, подправив javascript, окно не будет закрываться во всех браузерах на стороне пользователя.
    Дело ваше, но лично я негативно отношусь к сайтам где применяются всплывающие окна, особенно подгружаемые на автомате, а если еще и без возможности закрытия, все, черный список для такого сайта обеспечен.
    По теме всплывающих окон, можете посмотреть еще одно интересное решение: Стабильный всплывающий блок при прокрутке страницы

    Ответить
  • PROman: 26 августа, 2012 в 15:36

    Спасибо большое за статью! Только вопрос — как реализовать, чтобы модальное окно сразу выводилось при загрузке странички? Нужно сделать для оповещения клиентов на сайте.

    Ответить
    • driver: 15 сентября, 2012 в 23:25

      PROman Вам скорее будет лучше обратить внимание на другой скрипт Стабильный информационный блок при прокрутке страницы
      Удачи!

      Ответить
  • Djontirovanie: 3 сентября, 2012 в 17:37

    Здравствуйте,уважаемый driver. Не могли бы вы подсказать как сделать так, чтобы после закрытия окна с видеороликом (в примере — с ледниковым периодом), воспроизведение видео прекращалось.

    Ответить
  • Djontirovanie: 3 сентября, 2012 в 19:50

    Допишу, что возможно решил проблему (может кому-то пригодится). Т.к. только что нашел некий скрипт Jqvideobox, работающий в модальном окне и реализованный также на jQuery. На первый взгляд то что нужно. Буду пробовать.

    Ответить
  • Сергей: 4 сентября, 2012 в 17:15

    Здравствуйте! Не могу разобраться с этим:
    Включение Popup с JQuery
    Куда код из статьи ниже не могу понять…(

    Ответить
  • Djontirovanie: 4 сентября, 2012 в 20:58

    К сожалению проблема не решена, т.к. данный скрипт (Jqvideobox) не поддерживает видео из vk.com (поддерживает только из vkontakte.ru, а он переехал на .com). Как остановить воспроизведение видео ума не приложу, может — сделать какое-нибудь переключение на другой видеоролик без звука, который и будет воспроизводиться после закрытия модального окна?

    Ответить
  • Алексей: 18 октября, 2012 в 11:50

    Подскажите, возникта следующая проблема с кнопкой закрытия окна.
    img.btn_close — в стилях дописал background: url (‘…/img/close.png’) no-repeat; — кнопка моя показывается но поверх нее еще показывается системная кнопка (надпись close и граница выделена, не знаю как объяснить, обычно такое возникает(внешне) когда браузер не находит картинку и рисует выделенную для нее область и ставит красный крестик) — все это у меня поверх моей картинки…

    Ответить
    • driver: 18 октября, 2012 в 13:16

      Алексей
      В стилях ничего дописывать не надо, вывод кнопки закрытия окна прописан непосредственно в 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 на другую с сохранением имени.

      Ответить
  • Семен: 16 ноября, 2012 в 03:43

    Сказать Вам «огромное спасибо» это ничего не сказать. Ребята работа проделанная Вами просто огромна. Низкий Вам поклон и и еще больше полезных статей и уроков.

    Ответить
    • driver: 16 ноября, 2012 в 04:02

      Семен. Спасибо вам за внимание к статье и за отзыв.

      Ответить
  • Delly: 28 декабря, 2012 в 13:29

    Извините, куда писать последний блок кода «Включение Popup с JQuery»?

    Ответить
    • Delly: 28 декабря, 2012 в 13:43

      А, поняла между
      .
      Спасибо огромное за замечательное модальное окно.

      Ответить
  • Сергей: 3 апреля, 2013 в 00:48

    Здравствуйте, подскажите пожалуйста как сделать чтобы при закрытии модального окна видео останавливалось, а то на фоне остаётся звук из этого видео, что не очень удобно для посетителей сайта.

    Ответить
    • driver: 3 апреля, 2013 в 02:39

      Здравствуйте.
      В исполняемом скрипте необходимо добавить одну строчку 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;
      });
      });

      Ответить
  • tikhonshw: 9 апреля, 2013 в 14:22

    а как передать в окно переменную из php «’.$row[id].’»

    Ответить
  • vbf: 3 июня, 2013 в 00:07

    Событие .live () в версии JQ 1.9.1 уже не поддерживается (рекомендуется использовать .on ()), окошко не закрывается. Но если использовать версию 1.4.1 (как в примере) — все работает.
    Спасибо.

    Ответить
    • driver: 3 июня, 2013 в 00:30

      Спасибо за подсказку, обязательно учту при следующем обновлении.

      Ответить
  • Alexander: 21 июня, 2013 в 10:47

    Всем привет!
    Кто знает, что надо добавить в java, что-бы это окно закрывалось ещё и при нажатии кнопки «Escape» на клавиатуре?

    Ответить
  • Надежда: 29 октября, 2013 в 16:18

    Здравствуйте! Подскажите пожалуйста, как добавить скрол к fade?

    Ответить
  • Marina: 23 ноября, 2013 в 23:57

    Доброй ночи!
    driver, есть вопрос)))
    Можно это окно сделать на джумле2.5???
    Боюсь экспериментов, поэтому спрашиваю. Уже был печальный опыт с установкой плагина
    Спасибо.

    Ответить
    • driver: 24 ноября, 2013 в 00:24

      Ночи доброй!
      Сделать с этим окном можно всё, в том числе и прикрутить к джумле, вордпресу, и другим движкам. Главное в этом слово «прикрутить» и никак иначе, так как, это не специальный плагин или модуль, для какой либо CMS. Придется поработать руками и расковырять парочку файлов шаблона(темы). Если отсутствует понимание того что вы делаете, лучше воспользоваться готовыми решениями и спать спокойно, а набравшись опыта, и забив на страх, можно обратить свой незатуманеный взор, и на свободные разработки, вроде этого модального окна.
      Удачи!

      Ответить
      • Marina: 24 ноября, 2013 в 00:43

        Как приятно, что опять быстро ответили
        родные плагины джумлы не хотят нормально работать, а я и еще туда вставила форму обратной связи)))
        Рискну сделать ваше окно на тестовом сайте, только он на локалке.
        Кстати на Bloggere встало на ура, но с вашей помощью (если помните) )))))))))))))))! Спасибо!

        Ответить
  • Marina: 24 ноября, 2013 в 01:16

    driver!
    Спасибо!
    Если что,…опять напишу)))

    Ответить
  • Marina: 27 ноября, 2013 в 15:42

    Добрый день driver!
    Хорошее окно, но! У меня такая ситуация.
    Делаю все по порядку, картинку на кнопку поставила свою с сохранением имени, стили и скрипт все нормально и окно открывается.
    Затем, например хочу в окне изменить текст. К примеру в сообщении с кнопками вставляю в окно стили css или просто инфу)и ВСЕ! Больше окно не проявляется. Пока просто копирую все ВАШИ данные в сообщение и публикую, то все хорошо. А потом беда.
    Проверила несколько раз на все наличие и скриптов и стилей и Chrome обновила и комп почистила.
    (мой блог на реконструкции. Для просмотра пока не открыт).
    Может подскажите как решить проблему. Надеюсь на ответ.
    Спасибо!

    Ответить
  • driver: 27 ноября, 2013 в 16:28

    День добрый Marina!
    Не видя конкретно то что вы делаете, какие изменения вносите в структуру окна, трудно что-либо подсказать. В данное время, сию минуту, всячески изгалялся над содержанием во всех модальных окнах, вставлял текст, ссылки и примеры исходного кода. Все работает и отображается отлично. Пожалуйста проверьте, все ли вы правильно делаете, так как именно с этим модальным окном, мало у кого возникают хоть какие то проблемы. Будет возможность показать ваши эксперименты, показывайте, обязательно разберем все ошибки.
    Удачи!
    PS: Если вставляете в окно код стилей css, то не заключайте его в теги

    <style> и </style>
    <style> и </style>

    В этом случае вас ожидает девственная чистота:))

    Ответить
  • Marina: 28 ноября, 2013 в 02:56

    Доброй ночи driver!
    Никак не ожидала такого быстрого ответа. Спасибо Вам за оперативность.
    Все перепробовала, но результат такой же. Не понимаю почему, но именно в сообщении ( когда пишешь) нельзя редактировать. Выношу в файл блокнота, там редактирую для себя ( цвет, фон, шрифты и т д) и только потом, готовый результат копирую в сообщение ничего там не исправляя. Тогда работает.
    Но опять же, как только что-то тронешь в самом черновике в Blogger — ВСЕ! Окно не отображается.
    Неужели только у меня такой глюк?!
    Постараюсь завтра сделать это на тестовом блоге и напишу ссылку здесь. Надеюсь на ответ.( Перед отправкой этого сообщения проверила еще раз: изменила цвет фона и тени в самом сообщении черновика Blogger и обновила публикацию. НОЛЬ!)
    Спасибо!
    А особенное спасибо за это : «…показывайте, обязательно разберем все ошибки.»
    )))

    Ответить
  • Marina: 1 декабря, 2013 в 00:31

    Доброй ночи driver!
    Проблема осталась.
    Первое. «Тупо» копирую ваши данные для окна к себе в сообщение – окно открывается.
    Второе. Открываю для редакции это сообщение и на пустом пространстве щелкаю мышкой ( не говорю уже что-то исправлять)
    — ВСЕ! Окно не открывается.
    Вот ссылка на тестовый блог.
    переход с главной на кнопку предыдущее.
    Может есть мысли как исправить это безобразие?
    Надеюсь на ответ
    Спасибо!

    Ответить
    • driver: 1 декабря, 2013 в 20:40

      Marina
      Ответил по почте, проверьте E-mail…

      Ответить
  • Александр: 1 декабря, 2013 в 16:39

    Друзья, подскажите пожалуйста, есть проблеммка. Пытаюсь поставить окно на сайт, и сталкиваюсь с такой проблемой, окно открывается, но задний фон перекрывает все что там есть, то есть сам fade закрывает окно, по всей видимости, соответственно ничего не работает, как исправить ошибку??

    Ответить
  • Николай: 19 декабря, 2013 в 16:48

    Здравствуйте! Подскажите, пожалуйста, как сделать чтобы при нажатии на дополнительную (не та что в верху справа) кнопку «Закрыть» окно исчезало. Спасибо!

    Ответить
    • driver: 19 декабря, 2013 в 17:12

      Здравствуйте!
      Если я вас правильно понял, то очень просто. Например, располагаете любую кнопку или текстовую ссылку внутри окна, ну скажем, в конце сообщения, прописываете к кнопке(ссылке) атрибуты, такие же как у стандартной кнопки закрытия.
      <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>

      Ответить
      • driver: 19 декабря, 2013 в 17:16

        rel=”nofollow” указывать не надо, это у меня плагин в комментах закрывает все ссылки, даже те, которые в примерах кода, стоит на страже, так сказать)))

        Ответить
      • Николай: 19 декабря, 2013 в 17:26

        Огромное спасибо. Действительно просто. Долголетия и процветания Вам И Вашему сайту.

        Ответить
  • Александр: 13 февраля, 2014 в 00:28

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

    Ответить
    • driver: 15 февраля, 2014 в 01:33

      Всё очень просто, для каждого окна прописан уникальный атрибут в ссылке rel="popup_name", каждому новому окну присваивает свой атрибут типа: rel="popup1", rel="popup2" и т.д. Не забывайте что атрибут rel=”” должен совпадать с id модального окна. Например в ссылке на вызов у вас rel="popup1" соответственно срабатывать будет окно с div id="popup1"
      Смотрите исходники, и по аналогии делайте у себя, внося нужные вам поправки.
      Удачи!

      Ответить
      • Александр: 15 февраля, 2014 в 13:07

        Спасибо так и сделал. Все работает!

        Ответить
  • Marina: 15 февраля, 2014 в 01:37

    Доброй ночи driver! Вот опять к вам за помощью))) Есть модальное окно ( к сожалению не ваше)
    Контент вставляется без проблем, встала даже форма обратной связи, но вот вопрос:
    как правильно добавить в скрипт :
    //При клике вне области модального окна, фон и модальное окно скрываются
    $(«.xxxxxxxxx»).click (function () {
    $(«.zzzzzz, .ccccccc»).hide ();
    $(«body»).css ({“overflow”:”auto”});
    });
    чтобы так и сделать, окно закрывается при клике вне окна, на любом месте экрана?
    что нужно вставить вместо xxxxx, cccccc и zzzzzz ???
    Заранее спасибо!!!

    Ответить
    • driver: 15 февраля, 2014 в 04:33

      Вместо .хххххх прописываете класс соответствующий фону затемнения, какой у вас он не знаю, что то типа .modal_bg или еще как то, на место .zzzz тоже самое .modal_bg или еще как то, а там где .ccccc — класс самого модального блока .modal_window или как там у вас (скоро телепатом стану точно). И смотрите за кавычками, такие («) не катят))))

      Ответить
  • Marina: 15 февраля, 2014 в 14:39

    Добрый день!
    Написала вам в личку. ОЧЕНЬ надеюсь на ответ. Заранее спасибо!

    Ответить
    • driver: 15 февраля, 2014 в 21:48

      Ответил на мыло, надеюсь смог вам помочь.

      Ответить
      • Marina: 15 февраля, 2014 в 22:23

        Дорогой driver! Огромное вам спасибо за ответ и неоценимую помощь!!!
        Говорю совершенно официально — ВЫ ЛУЧШИЙ в интернете. Вы и NMitra.
        Вы всегда терпеливо отвечаете и не требуете за это оплату.
        Большое вам человеческое спасибо!
        НО )))))
        Есть еще вопрос жизненно важный ( тоже напишу в личку попозже)
        Когда вернусь обновлять свой блог прямые ссылки на ваш сайт. Вы лучший МАСТЕР своего дела.

        Ответить
  • Bekarys: 27 февраля, 2014 в 15:56

    Добрый день!
    А как сделать так, чтобы при нажатии на ссылку, новая страница(контент) открывалась в модальном окне на текущей странице?

    Ответить
    • driver: 27 февраля, 2014 в 18:20

      Поместить в модальное окно содержание нужной вам страницы через фрейм:

      <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 отступов.

      Ответить
      • Bekarys: 28 февраля, 2014 в 09:06

        Спасибо, получилось, только вот вопрос, а можно сделать чтобы в модальном окне выводился только страницы, без header-а и footer-а?

        Ответить
  • Владимир: 3 марта, 2014 в 18:57

    Здравствуйте!
    Уважаемый driver, подскажите пожалуйста, вставил в ваше модальное окно форму и сделал ссылку на кнопку для открытия, но почему-то окно открывается при загрузке страницы, что нужно прописать в скрипте чтобы открывалось только по нажатию кнопки?

    Ответить
    • Владимир: 3 марта, 2014 в 19:04

      Извините за беспокойство, нашёл ошибку. Спасибо Вам за модальное окно. Успехов Вам!

      Ответить
      • driver: 4 марта, 2014 в 02:16

        Пожалуйста. Рад что у вас всё получилось)))

        Ответить
  • Андрей: 1 апреля, 2014 в 01:37

    Блин, driver, подскажите где найти модальное окно, может попадалось вам на просторах инета, перепробовал уйму, у всех окна не модальные, под ними скролится основной контент. А нужно чтоб сайт под окном не скролился. Типа как вконтакте в фейсе. Спасибо.

    Ответить
  • Андрей: 2 апреля, 2014 в 22:48

    Здраствуйте driver, а что с моим комментом что то было не так?

    Ответить
    • driver: 6 апреля, 2014 в 18:22

      Здравствуйте, Андрей. Извините за задержку с ответом. С вашим комментом всё так )) просто иногда мы предполагаем, а… Теперь, по самому вашему комментарию, цитирую:
      нужно чтоб сайт под окном не скролился
      Для того чтобы убрать скролл страницы при открытом окне, достаточно в наш winmodal.js добавить одну строку:

      $(“body”).css({“overflow”:”hidden”});
      $(“body”).css({“overflow”:”hidden”});

      Добавлять эту строчку следует в раздел затемнения фона, сразу после строки:

      $(‘body’).append(‘<div id=”fade”></div>’);
      $(‘body’).append(‘<div id=”fade”></div>’);

      Надеюсь смог вам помочь, хоть и с опозданием.

      Ответить
  • Сергей: 14 апреля, 2014 в 20:28

    Здравствуйте,driver,у меня такая проблема: рядом с кнопкой «закрыть» находится кнопка с изображением битой картинки. Как от этого избавиться?

    Ответить
    • driver: 14 апреля, 2014 в 20:46

      Здравствуйте, Сергей.
      Даже не представляю, как это может быть, если картинка отображается, значит путь до неё в скрипте прописан правильно, других картинок кнопки закрытия просто быть не должно, если конечно вы не прописали напрямую в html какую-то другую картинку.

      Ответить
  • Bladislav: 6 мая, 2014 в 23:56

    Здравствуйте ,driver. Поставил данный скрипт, все отлично работает, лучший что я находил, однако появилась проблема, перестал работать другой скрипт(lightbox) использующий библиотеки jquery . Как я понимаю нужно куда то прикрутить jQuery.noConflict в ваш скрипт. Можете помочь ? Заранее спасибо.

    Ответить
    • Bladislav: 7 мая, 2014 в 00:49

      Спасибо я разобрался

      Ответить
  • Phil: 4 июня, 2014 в 20:01

    Помогииите, пожалуйста!
    Почему у меня не выполняется код?! Я все правильно скопировал на сайт (еще раз перепроверил), но при нажатии на ссылку ничего не происходит, он только, кажется страницу перезагружает. Помогииите! Пожалуйста!

    Ответить
    • Phil: 4 июня, 2014 в 21:03

      Разобрался. Оказывается я просто поместил HTML-код внутрь маленького блока.

      Ответить
      • driver: 4 июня, 2014 в 22:39

        Ну и славненько))))

        Ответить
  • Sergey: 6 июня, 2014 в 04:33

    Окно появляется но не работает кнопка закрыть

    Ответить
  • Алексей: 10 июня, 2014 в 11:27

    Добрый день!
    В header-e шаблона opencart есть следующее:
    Туда же, в хедер, вставляю див с модальным окном или формой,
    Заголовок
    Любой текст,что душе угодно
    Но в обоих случаях оно торчит на странице видимым куском, а не появляется по клику на картинку… Что-то я упустил, а что — не могу понять…

    Ответить
  • Dmitriy: 18 октября, 2014 в 18:54

    Доброго всем здоровица. У меня наверное дебильный вопрос, просто я в это деле новичёк.
    У меня сайт работает на движке Модекс. В нём следующая структура:
    Шаблоны
    Дополнительные поля
    Чанки
    Сниппеты
    Плагины
    Категории
    Я хочу создать страницу, на которой я бы выставил в ряд видеоролики(тумбы), и чтобы при нажатии они открывались в модальном окне с разрешением например 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(‘&amp;’);
    var popWidth = dim[0].split(‘=’)[1]; //Возвращает первое значение строки запроса
     
    // Добавить кнопку “Закрыть” в наше окно, прописываете прямой путь к картинке
    $(‘#’ + popID).fadeIn().css({ ‘width’: Number( popWidth ) }).prepend(‘&lt;a href=”#” rel=”nofollow”&gt;&lt;/a&gt;’);
     
    //Определяет запас на выравнивание по центру (по вертикали по горизонтали)мы добавим 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(‘&amp;’);
    var popWidth = dim[0].split(‘=’)[1]; //Возвращает первое значение строки запроса
    // Добавить кнопку “Закрыть” в наше окно, прописываете прямой путь к картинке
    $(‘#’ + popID).fadeIn().css({ ‘width’: Number( popWidth ) }).prepend(‘&lt;a href=”#” rel=”nofollow”&gt;&lt;/a&gt;’);
    //Определяет запас на выравнивание по центру (по вертикали по горизонтали)мы добавим 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;
    });
    });

    Спасибо за ответ

    Ответить
    • driver: 18 октября, 2014 в 20:32

      Код, что вы привели в комментарии, это содержимое исполняемого плагина 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>
      С модекс знаком поверхностно, так что со структурой шаблонов, вам придётся разбираться самостоятельно

      Ответить
  • Иван: 14 ноября, 2014 в 19:37

    Автор крут молодец, что скачать можно

    Ответить
  • Аня: 11 декабря, 2014 в 02:02

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

    Ответить
    • driver: 11 декабря, 2014 в 05:39

      Здесь:
      <div id="popup_name" class="popup_block">
      Сюда картинку....
      </div>

      Только вряд ли именно такое модальное окно вам нужно, большое количество картинок, такое же большое количество разных размеров, эти окна больше для информационного разового содержания, а не для организации полноценной галереи. Существует много готовых решений и не обязательно на jQuery. Например такое: тынц или целая коллекция галерей Ну, и на конец это: тынц

      Ответить
      • Аня: 12 декабря, 2014 в 01:56

        Огромное спасибо за совет 🙂 Всё получилось 🙂

        Ответить
  • andr: 25 декабря, 2014 в 00:41

    Спасибо! Буду пробовать сейчас.
    Как раз стоит задача сделать вывод видео с ютуба мелкими миниатюрами с всплывающим окном для показа в развернутом режиме на ½ экрана.

    Ответить
    • driver: 25 декабря, 2014 в 04:34

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

      Ответить
  • Cartman: 24 апреля, 2015 в 15:28

    Подскажите, есть ли возможность вставить это окно и что бы оно автоматически открылось 1 раз для вошедшего на сайт и записалось в куках. И при обновлении странички что бы оно не появлялось? уж очень нравиться окошко

    Ответить
    • driver: 24 апреля, 2015 в 16:57

      Посмотрите вот эту статью и прочитайте комментарии к ней, там всё есть по вашему вопросу.

      Ответить
  • Влад: 16 августа, 2015 в 23:50

    Не работает с подгрузкой данных через ajax.
    Берет данные изначалього divа, а потому уже не центруется.

    Ответить
    • driver: 17 августа, 2015 в 17:12

      Здравствуйте, Влад.
      Думается мне, что вы слишком требовательны к такому простейшему скрипту, изначально заточенному под довольно скромный функционал, расширять который у меня нет ни времени и особо острого желания. Да и нигде, ни слова в статье не сказано о возможности подгрузки данных через ajax. Всегда существует альтернатива, в конце концов есть масса настоящих «комбайнов», которые загрузят и подгрузят вам всё что угодно, и откуда угодно.
      Спасибо за проявленный интерес, найдёте решение, буду рад если отпишитесь, что да как.
      Удачи!

      Ответить
  • Александр: 6 октября, 2015 в 22:24

    здравствуйте… можно ли это окно использовать для каталога…? на странице 12 div — блоков. в каждом блоке есть ссылка — подробнее… можно ли подключить все блоки ?

    Ответить
    • driver: 6 октября, 2015 в 22:45

      Здравствуйте, Александр.
      Предусмотрена возможность использования неограниченного количества модальных окон. Главное следите за правильной связкой атрибута rel ссылки активации окна и уникального идентификатора id самого модального div-контейнера
      Так если в ссылке rel="popup-1" она откроет окно с id="popup-1", и так далее, при добавлении очередного модального окна (popup-2, popup-3 и т.п…)
      Это если я вас правильно понял)))

      Ответить
      • Александр: 6 октября, 2015 в 23:47

        спасибо… клевый код…

        Ответить
  • vladimir: 8 декабря, 2015 в 10:19

    Добрый день.
    подскажите как в цикле вывести ссылки с окнами, только по каждой ссылке будет открываться вкладка с соответствующими данными
    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: 23 сентября, 2016 в 00:08

    Забадалсся на вордпресс вставлять. Можно конкретно что и куда) Большое спасибо за помощь за ранее!

    Ответить
  • Stanislav: 5 октября, 2016 в 23:01

    В общем при подключении
    Окно работает, но пропадает меню сайта. Если не прописывать выше изложенный скрипт, то окно не работает.
    Как быть подскажите…

    Ответить
    • driver: 6 октября, 2016 в 01:19

      Здравствуйте, 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
      Не видя пациента трудно его лечить ))), Надеюсь всё у вас получится.

      Ответить
  • Павел: 15 ноября, 2017 в 02:42

    Здравствуйте.
    Хорошее всплывающее окошко и пользоваться удобно, но вот с jQuery v2.2.4 не работает.
    Можно как-то поправить это или может будет новая версия данного скрипта?
    Спасибо.

    Ответить
    • driver: 15 ноября, 2017 в 15:44

      Здравствуйте, Павел.
      В jQuery v2.2.4 больше не поддерживается синтаксис href^=#, чтобы всё работало необходимо заменить его на href*=\\#. Для этого в файле dm-modal.js найдите строку:
      $('a.poplight[href^=#]').click(function()
      и просто замените в ней a.poplight[href^=#] на a.poplight[href*=\\#]
      Ну, а я в свою очередь внесу изменения в статью, в демо и в архив с исходниками, так что вам спасибо за наводку, а то что-то давно не обращался к данному скрипту и не обновлял.

      Ответить
      • Ден: 11 июля, 2017 в 21:52

        Здравствуйте, отличный скрипт, спасибо огромное! Но у меня вопрос, не удается привязать к каждому модальному окну свой уникальный адрес. Что бы при клике на окошко, в адресной строке отображался его адрес, и человек мог скопировать его, переслать, и при открытии ссылки сразу открывалась страница с развернутым окном. Как это реализовать, подскажите коль не затруднит. Заранее благодарен!

        Ответить
      • Ден: 13 июля, 2017 в 01:17

        Я как бы врубаюсь что это через history.pushstate делается, но конкретно к этому примеру не могу применить. Кто поможет, отблагодарю. Маякните на почту 2015500@rambler.ru

        Ответить

Оставить комментарий

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>