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

    Добрый день driver!

    Хорошее окно, но! У меня такая ситуация.

    Делаю все по порядку, картинку на кнопку поставила свою с сохранением имени, стили и скрипт все нормально и окно открывается.

    Затем, например хочу в окне изменить текст. К примеру в сообщении с кнопками вставляю в окно стили css или просто инфу)и ВСЕ! Больше окно не проявляется. Пока просто копирую все ВАШИ данные в сообщение и публикую, то все хорошо. А потом беда.

    Проверила несколько раз на все наличие и скриптов и стилей и Chrome обновила и комп почистила.

    (мой блог на реконструкции. Для просмотра пока не открыт).

    Может подскажите как решить проблему. Надеюсь на ответ.

    Спасибо!

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

    День добрый Marina!

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

    Удачи!

    PS: Если вставляете в окно код стилей css, то не заключайте его в теги

    <style> и </style>

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

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

    Доброй ночи driver!

    Никак не ожидала такого быстрого ответа. Спасибо Вам за оперативность.

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

    Но опять же, как только что-то тронешь в самом черновике в Blogger — ВСЕ! Окно не отображается.

    Неужели только у меня такой глюк?!

    Постараюсь завтра сделать это на тестовом блоге и напишу ссылку здесь. Надеюсь на ответ.( Перед отправкой этого сообщения проверила еще раз: изменила цвет фона и тени в самом сообщении черновика Blogger и обновила публикацию. НОЛЬ!)

    Спасибо!

    А особенное спасибо за это : «...показывайте, обязательно разберем все ошибки.»

    )))

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

    Доброй ночи driver!

    Проблема осталась.

    Первое. «Тупо» копирую ваши данные для окна к себе в сообщение - окно открывается.

    Второе. Открываю для редакции это сообщение и на пустом пространстве щелкаю мышкой ( не говорю уже что-то исправлять)

    — ВСЕ! Окно не открывается.

    Вот ссылка на тестовый блог.

    переход с главной на кнопку предыдущее.

    Может есть мысли как исправить это безобразие?

    Надеюсь на ответ

    Спасибо!

    Ответить
  5. Александр:

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

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

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

    Ответить
    • driver:

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

      В исполняемом скрипте необходимо добавить одну строчку document.location.reload ();

      В коде это в самом конце, будет выглядеть так:

      //Закрыть всплывающее окно и слой затемнения
      $('a.close, #fade').live('click', function() { //При нажатии окно и слой затемнения закрываются 
      $('#fade , .popup_block').fadeOut(function() {
      $('#fade, a.close').remove();
      document.location.reload();//При нажатии видео и окно закрываются
      });		
      return false;
      });
      });
      Ответить
  7. tikhonshw:

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

    Ответить
  8. vbf:

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

    Спасибо.

    Ответить
    • driver:

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

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

    Всем привет!

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

    Ответить
  10. Надежда:

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

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

    Доброй ночи!

    driver, есть вопрос)))

    Можно это окно сделать на джумле2.5???

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

    Спасибо.

    Ответить
    • driver:

      Ночи доброй!

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

      Удачи!

      Ответить
      • Marina:

        Как приятно, что опять быстро ответили

        родные плагины джумлы не хотят нормально работать, а я и еще туда вставила форму обратной связи)))

        Рискну сделать ваше окно на тестовом сайте, только он на локалке.

        Кстати на Bloggere встало на ура, но с вашей помощью (если помните) )))))))))))))))! Спасибо!

        Ответить
        • driver:

          Очень хорошая привычка обкатывать все нововведения для сайта на локальном сервере. Понимание у вас есть))) Остальное все приложится. Получилось с Blogger, уверен и с Джумлой все будет в порядке.

  12. Marina:

    driver!

    Спасибо!

    Если что,...опять напишу)))

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

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