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

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

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

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

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

Большое модальное окно bootstrap!

Вот такое модальное окно bootstrap, в которое можно ставить картинки, описания к ним, какие-то акции рекламировать ставить контактные формы.

Не забывайте ставить лайки ! Поддержите проект !

Закрыть

Это пример большого модального окна 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 и все.

Маленькое модальное окно bootstrap!

Не забывайте ставить лайки ! Поддержите проект !

Закрыть

Если соберетесь располагать на одной странице несколько модалей, то обязательно каждому всплывающему окну назначьте уникальный идентификатор 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.

Смотрите описание накопительная емкость для воды у нас. Подробности перевозки грузов негабаритных на сайте.

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

Базовая сборка Bootstrap 3

Данный пост о том, как я настраиваю базовый шаблон Bootstrap 3 framework. Данную базовую…

Слайдер Bootstrap Ken Burns Effect Carousel

Собрал слайдер Bootstrap Ken Burns Effect Carousel и теперь делюсь с читателями своего сайта….

Плавающий виджет WordPress без плагина

В статье пойдет речь о том как сделать плавающий виджет WordPress без использования плагинов….