Dobrovoi Master
сделано с душой

В состоянии постоянного подключения...
Главная » 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. Алексей:

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

    Ответить
    • driver:

      Алексей, здравствуйте.

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

      В общем смотрите: Здесь, если смог помочь, буду рад.

      Удачи!

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

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

    Ответить
    • driver:

      Алексей про кнопки я написал , цитирую:

      без них уже не очень удобно для пользователей.

      Я не сомневался, что у вас все получится, ну и хотелось бы как — нибудь при случае взглянуть на результат.

      Удачи!

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

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

    Ответить
  4. Михаил:

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

    Ответить
    • driver:

      Михаил

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

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

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

    Ответить
    • driver:

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

      Ответить
  6. Константин:

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

    Поддерживаю!

    Ответить
  7. Роман:

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

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

    К тому же, прячется кнопка закрытия, из-за чего модальное окно не закрывается.

    Ответить
    • driver:

      Роман здравствуйте!

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

      К тому же, прячется кнопка закрытия, из-за чего модальное окно не закрывается.

      Для закрытия окна достаточно кликнуть вне окошка в любом месте страницы :)))

      Ответить
  8. Роман:

    Для закрытия окна достаточно кликнуть вне окошка в любом месте страницы 🙂 ))

    Это понятно, вот только посетители моего сайта с этим могут не справиться.

    Кстати, у вас прикольно сделаны кнопки для редактирования текста комментариев (жирный, курсив и т.д.) Какой-то плагин используете или сделали сами?

    Ответить
    • driver:

      Роман.

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

      Плагин форматирования комментов пользую WP Comment Quicktags Plus — расширенная русская версия

      Ответить
  9. Роман:

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

    Шикарно получилось. Премного благодарен.

    Плагин форматирования комментов пользую WP Comment Quicktags Plus — расширенная русская версия

    За это отдельное спасибо. Где тут у вас кнопочки социальных сетей?))

    Ответить
    • driver:

      Роман.

      Ваши комментарии подтолкнули меня на написание отдельной статьи по теме, так что и вам спасибо)))

      Где тут у вас кнопочки социальных сетей?

      Можете твитнуть, плюсануть, подписаться на ленту, кинуть в закладки, все на виду)))

      Удачи!!!

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

    Ответить
  11. Юля:

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

    Ответить
    • driver:

      Юля.

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

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

    Хорошая статься.

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

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

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