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

Модальное окно с помощью 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="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

После последнего обновления 15.01.2017, тестировал работу скрипта вплоть до версии jQuery 3.1.1, полёт нормальный ))).

Так же нам понадобится сам плагин, его тоже подключаем к странице, всё там же перед тегом </body>:

<script type="text/javascript" src="dm-modal.js"></script>

В следующем шаге рассмотрим начинку и функции плагина jquery, для активации нашего всплывающего окна, код содержит некоторые пояснения, для лучшего понимания того, что мы делаем.
 

Плагин JQuery

$(document).ready(function(){
   //При нажатии на ссылку с классом poplight и href атрибута тега <a> с #
	$('a.poplight[href*=\\#]').click(function() {
		var popID = $(this).attr('rel'); //получаем имя окна, важно не забывать при добавлении новых менять имя в атрибуте rel ссылки
		var popURL = $(this).attr('href'); //получаем размер из href атрибута ссылки
 
   //запрос и переменные из href url
		var query= popURL.split('?');
		var dim= query[1].split('&');
		var popWidth = dim[0].split('=')[1]; //первое значение строки запроса
 
   //Добавляем к окну кнопку закрытия
		$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" title="Закрыть" class="close"></a>');
 
   //Определяем маржу(запас) для выравнивания по центру (по вертикали и горизонтали) - мы добавляем 80 к высоте / ширине с учетом отступов + ширина рамки определённые в css
		var popMargTop = ($('#' + popID).height() + 80) / 2;
		var popMargLeft = ($('#' + popID).width() + 80) / 2;
 
		//Устанавливаем величину отступа
		$('#' + popID).css({ 
			'margin-top' : -popMargTop,
			'margin-left' : -popMargLeft
		});
		//Добавляем полупрозрачный фон затемнения
		$('body').append('<div id="fade"></div>'); //div контейнер будет прописан перед тегом </body>.
		$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //полупрозрачность слоя, фильтр для тупого IE
 
		return false;
	});
   //Закрываем окно и фон затемнения
        $(document).on('click', 'a.close, #fade', function() { //закрытие по клику вне окна, т.е. по фону...
        $('#fade , .popup_block').fadeOut(function() {
        $('#fade, a.close').remove();  //плавно исчезают 
    });   
    return false;    
   });  
});

Заключение:

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

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

При возникновении проблем с остановкой видео при закрытии модального окна, можете воспользоваться решением описанным здесь.

Обновление: Версия dm-modal.js v1.3 (15.01.2017)
Исправлено: Заменена устаревшая функция .live(), используется синтаксис href*=\\#. Теперь плагин работает с актуальными версиями библиотеки jQuery

На этом всё! Надеюсь, получился еще один полезный урок.

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

150 комментариев
  1. Сергей:

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

    Ну и для кучи, там же в IE нет крестика закрыть.

    А в мазиле он с border

    Как сделать, что бы в IE затемнялась вся страница целиком? и окно выводилось по центру видимой области, а не где то там далеко вверху.

    Спасибо!

    Ответить
    • driver:

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

      Удачи!

      Ответить
  2. Ярослав:

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

    Ответить
    • driver:

      Ярослав.

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

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

      Ответить
  3. Ярослав:

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

    Ответить
  4. driver:

    Нет, кнопкой «Esc» окно не закроется, а вот «F5» пока никто не отменял, да и всегда можно свалить со страницы))))

    При чем здесь IE6 и заглушка, так и не въеду, подправив javascript, окно не будет закрываться во всех браузерах на стороне пользователя.

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

    По теме всплывающих окон, можете посмотреть еще одно интересное решение: Стабильный всплывающий блок при прокрутке страницы

    Ответить
  5. PROman:

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

    Ответить
  6. Djontirovanie:

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

    Ответить
  7. Djontirovanie:

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

    Ответить
  8. Сергей:

    Здравствуйте! Не могу разобраться с этим:

    Включение Popup с JQuery

    Куда код из статьи ниже не могу понять...(

    Ответить
  9. Djontirovanie:

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

    Ответить
  10. Алексей:

    Подскажите, возникта следующая проблема с кнопкой закрытия окна.

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

    Ответить
    • driver:

      Алексей

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

      Ответить
  11. Семен:

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

    Ответить
  12. Delly:

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

    Ответить
    • Delly:

      А, поняла между

      .

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

      Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru