Модальное окно Bootstrap jQuery


Здравствуйте, недавно я познакомился с замечательным инструментом по созданию сайтов. Это фреймворк от разработчиков Twitter, под названием Bootstrap.
Но речь пойдет не о нем, а об одном из его компонентов. Это модальное окно Bootstrap, которое бесконфликтно вписалось на одну из моих страниц сайта.
Как видно из названия, модальное окно разработано с использованием технологий jQuery и требует подключения одноименной библиотеки.

Этот плагин совместим с WordPress, тем более, что библиотека Jquery должна уже быть подключена на WordPress по умолчанию и второй раз подключать ее не стоит. Да, я не оговорился, это именно плагин и вообще, любое расширение, дополняющее сайт, любой модуль я считаю плагином, будь то код, интегрированный в WordPress вручную, или-же плагин «из коробочки». Если хотите, то так и напишу — модальное окно Jquery на WordPress без плагина!

Не стал делать отдельную страницу для демонстрации модуля, она и так у меня есть. Нажмите на одну из кнопочек на странице.

Модальное окно Bootstrap jQuery ДЕМО

Скачать

Это пример большого модального окна bootstrap. Здесь добавлен класс modal-lg к самому блоку модали. Публикую весь код большой модали.

 <button class="btn btn-danger btn-lg" data-toggle="modal" data-target="#Modal-1">СMOTРЕТЬ</button>
</div>
<div id="Modal-1" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">...</h4>
<p>...</p>
</div>
<div class="modal-body">
<p>...</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div>

А вот пример маленького всплывающего окна по клику. Здесь просто класс modal-lg, заменен на modal-sm и все.

Если соберетесь располагать на одной странице несколько модалей, то обязательно каждому всплывающему окну назначьте уникальный идентификатор ID В сниппете он встречается два раза data-target="#Modal-1" и div id="Modal-1".
Скачайте архив, в нем находятся четыре файла: modal.html, modal.js, modal.css и свежая на данный момент версия библиотеки jquery-1.11.2.min.js. При подключении модального окна Bootstrap на WordPress последний файл jQuery-1.11.2.min.js подключать не нужно, а если окно работать не будет, нужно будет заменить вашу устаревшую версию библиотеки на свежую. Об этом ниже. Файл modal.js нужно закинуть в папку js активной темы, затем открыть файл functions.php и подключить скрипт. Если вы положите скрипт в другую папку, то не забудьте прописать правильный путь к файлу в этом коде.

 if ( !is_admin() ) {
function register_my_js() {
wp_enqueue_script( 'modal', get_bloginfo( 'template_directory' ).'/js/modal.js', array( 'jquery' ), '1.0', true );
}
add_action('init', 'register_my_js');
}

Содержимое файла modal.css копируите и добавьте в style.css, ну а содержимое modal.html в любую страницу, или публикацию. В нем помечено начало и окончание сниппета модали. Если после проделанных манипуляций модальное окно jquery не работает, еще раз проверьте правильность прописанного пути к файлу modal.js. Опять не работает? Замените библиотеку jQuery на новую jquery-1.11.2.min.js, в архиве она присутствует. А сделать это нужно следующим образом:

 function my_scripts_method() { wp_deregister_script( 'jquery' ); wp_register_script( 'jquery', get_bloginfo( 'template_directory' ). 'js/jquery-1.11.2.min.js'); wp_enqueue_script( 'jquery' ); } add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

— Ну вот и все, Модальное окно Bootstrap jQuery подключено.

— Подписывайтесь на статьи блога, думаю опубликовать еще некоторые модули Bootstrap с интеграцией в WordPress.


Похожие по Тегам статьи


8 thoughts on “Модальное окно Bootstrap jQuery

  1. Pavel

    Очень давно хочу изучить Bootstrap и применять в своих проектах. Но жаль никак руки не доходят. А спрос на него хороший =)

    1. Егор Автор записи

      У меня ушел 1 вечер. Я в шоке как все легко там.

      1. Pavel

        А переверстать свой сайт с использованием Bootstrap не хотите?

        1. Егор Автор записи

          Пусть пока такой будет. Он масштабируется, правда с косечками. У меня сейчас работа, потом сайт. Да, потом.

          1. Егор Автор записи

            Новые шаблоны, бесплатные, половина на bootstrap. А платные, сколько видел большенство. Я думаю, попадется премиум тема в руки хорошая, над которой не один разраб работал, может поставлю.

  2. ZeroXor

    Пожалуйста, исправьте у себя на лендинге «CSM» на «CMS» 🙂

    1. Егор Автор записи

      Здравствуйте, вот блин, я постоянно путаю =) Спасибо. Вообще его в скором времени нужно переверстать.