Главная » 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. Андрей:

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

    Ответить
    • driver:

      Рад что пригодилось, за отзыв спасибо.

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

      Ответить
  2. Sasha:

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

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

    как???

    Ответить
    • driver:

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

      <a href="#?w=500" rel="nofollow">Ваша ссылка на модальное окно</a>

      Здесь же и устанавливаете размер окна, соответствующий вашим требованиям для размещения контента (href="#?w=500" ).

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

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

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

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

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

    Ответить
    • driver:

      Алексей Спасибо за комментарий.

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

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

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

    Ответить
    • driver:

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

      Удачи.

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

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

    Ответить
    • driver:

      Спасибо Алексей за отзыв.

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

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

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

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

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

    Ответить
    • driver:

      Алексей

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

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

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

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

    P.S.

    С радостью списался с вами бы через почту, для ЛС. Надеюсь на дальнейшее сотрудничество:) (почта должна быть в коменте)

    Ответить
    • driver:

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

      Слайдер взял в обработку, надеюсь что — нибудь наковыряю ...

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

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

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

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