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

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

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

162 комментария
  1. Николай:

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

    Ответить
    • driver:

      Здравствуйте!

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

      <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:

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

        Ответить
      • Николай:

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

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

    Ответить
    • driver:

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

      Смотрите исходники, и по аналогии делайте у себя, внося нужные вам поправки.

      Удачи!

      Ответить
  3. Marina:

    Доброй ночи driver! Вот опять к вам за помощью))) Есть модальное окно ( к сожалению не ваше)

    Контент вставляется без проблем, встала даже форма обратной связи, но вот вопрос:

    как правильно добавить в скрипт :

    //При клике вне области модального окна, фон и модальное окно скрываются

    $(«.xxxxxxxxx»).click (function () {

    $(«.zzzzzz, .ccccccc»).hide ();

    $(«body»).css ({"overflow":"auto"});

    });

    чтобы так и сделать, окно закрывается при клике вне окна, на любом месте экрана?

    что нужно вставить вместо xxxxx, cccccc и zzzzzz ???

    Заранее спасибо!!!

    Ответить
    • driver:

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

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

    Добрый день!

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

    Ответить
    • driver:

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

      Ответить
      • Marina:

        Дорогой driver! Огромное вам спасибо за ответ и неоценимую помощь!!!

        Говорю совершенно официально — ВЫ ЛУЧШИЙ в интернете. Вы и NMitra.

        Вы всегда терпеливо отвечаете и не требуете за это оплату.

        Большое вам человеческое спасибо!

        НО )))))

        Есть еще вопрос жизненно важный ( тоже напишу в личку попозже)

        Когда вернусь обновлять свой блог прямые ссылки на ваш сайт. Вы лучший МАСТЕР своего дела.

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

    Добрый день!

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

    Ответить
    • driver:

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

      <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>

      Полосы прокрутки добавляются автоматически. Всё вместе у вас получится примерно такая конструкция в 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>

      В таком виде у вас будет появляться модальное окно шириной 550px с содержанием страницы заданной в iframe, высота подгоняется автоматом в соответствии размера содержания и, с учетом предустановленных в css отступов.

      Ответить
      • Bekarys:

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

        Ответить
  6. Владимир:

    Здравствуйте!

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

    Ответить
    • Владимир:

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

      Ответить
  7. Андрей:

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

    Ответить
  8. Андрей:

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

    Ответить
    • driver:

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

      нужно чтоб сайт под окном не скролился

      Для того чтобы убрать скролл страницы при открытом окне, достаточно в наш winmodal.js добавить одну строку:

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

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

      $('body').append('<div id="fade"></div>');

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

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

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

    Ответить
    • driver:

      Здравствуйте, Сергей.

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

      Ответить
  10. Bladislav:

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

    Ответить
  11. Phil:

    Помогииите, пожалуйста!

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

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

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

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

Отправляя к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