Главная » 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 !

163 комментария
  1. Олег:

    Доброе время суток.

    Покажите, как изменить скрипт модального окна, чтоб открывалась окно не с помощью ссылке , а с помощью input type=”button”?

    Ответить
    • driver:

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

      Примерно так: см.пример

      Ответить
      • Олег:

        Доброе время суток.

        под Wordpess не открывается модальное окно? что делать?

        через ссылку открывает на ура.

        может нужно onclick="location.href='#'"

        Благодарю за ответы!

        Ответить
        • Олег:

          вот сайт в разработке new.juntik.ru/domain/

        • driver:

          Олег, я же вам набросал пример для тега <input> в роли кнопки.

          Сейчас же у вас в скрипте modal_window.js функция .click прописана для ссылки, а кнопарь «модалка» )))

          <input type="button" id="button_1" class="poplight" rel="popup_name" value="модалка">

          а так же отсутствует атрибут data-width="#?w=400" в теге <input> с размером окна.

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

        • Олег:

          Доброе время суток.

          Я понимаю что функция .click прописана для ссылки, а как сделать на кнопку?

          Я недавно начал программировать.

          Вы помогите мне пожалуйста.

          Благодарю за ответы!

        • driver:

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

          Выше, в ответах вам, я дал ссылку на пример в редакторе JSFiddle, там как раз показал, как привязать плагин к тегу <input>, весь фарш html, js и css на поверхности: см.пример, чем же ещё могу вам помочь...

        • Олег:

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

          Я все сделал как вы написали.

          Ну не выходит эта модалка, в чем проблема не понимаю.

          Может проблема в wordpress?

          Да, у меня два скрипта, один по ссылке это modal_window.js

          и по input modal_domain.js

        • driver:

          На данный момент не вижу у вас в папке ...themes/verbosa/js/ вашей темы ни modal_window.js ни modal_domain.js. В разделе head темы прописаны ссылки, а сами файлы отсутствуют.

          Подключите скрипт напрямую в head или перед закрывающим тегом </body> прописав весь фарш скрипта между тегами <script type='text/javascript'>....</script>

      • Олег:

        Доброе время суток.

        Все проблема решена, все в моей не внимательности.

        Большое спасибо за ответы и терпение!

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

    Доброе время суток.

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

    Ответить
    • driver:

      ..."необходимой куки", это какой например?

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

        любая, например, куки ошибки со временем жизни 1-2 секунды, то есть при перезагрузке её не будет

        Ответить
  3. Ув автор, статья огонь!!!

    Подскажите как сделать всплывающее окно как на примере pricep.mhoon.ru

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

    ПС Заранее благодарю

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

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