Главная > Руководства > Отображаем модальные окна на JavaScript при помощи Bootstrap

Отображаем модальные окна на JavaScript при помощи Bootstrap


18 апреля 2013, 14:40. Разместил: Design FactoRy
На сегодняшний день Bootstrap собрал огромное сообщество людей со всего мира. Так как сейчас все ждут скорого выхода Bootstrap 3, мы не будем вдаваться в подробности. javascript-эффекты в Bootstrap не всегда подходят разработчикам, поэтому js-файлы не всегда нужны для работы всего фреймворка. Но при этом они позволяют нам проще и быстрее определять самые популярные UI-элементы без необходимости заново изобретать колесо.

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

Отображаем модальные окна на JavaScript при помощи Bootstrap

Собираем файлы

Начнем с того, что скачаем Bootstrap прямо с Github. Архив будет включать в себя файлы bootstrap.css и bootstrap.min.js, которые мы добавили в свое демо. Если для вас существует проблема в размере файла, то вы можете скачать файлы bootstrap-modal.js, который позволит вам использовать только javascript, связанный с модальными окнами. Вдобавок Jordan Schroter выпустил расширенный Bootstrap-класс модальных окон, который включает адаптивные дизайны и другие милые функции.

Но здесь мы будем использовать полную версию js-файла Bootstrap, который работает точно так же. Теперь нам нужно включить эти файлы в стандартный HTML5-шаблон. Нам нужно указать ссылки на эти внешние документы в шапке страницы.

<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Demo Modal Windows via Bootstrap</title>
<meta name="author" content="Jake Rocheleau">
<link rel="shortcut icon" href="http://vandelaydesign.com/favicon.ico">
<link rel="icon" href="http://vandelaydesign.com/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" media="all" href="css/default.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/modals.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

Центральный CSS-файл нашего шаблона называется default.css. Мы также включили несколько стилей, чтобы переписать стандартный дизайн модальных окон в Bootstrap. Вдобавок у нас имеется внешний файл с названием modals.js, который отвечает за пользовательские модальные окна. Этот файл также имеет пользовательские функции, написанные нами, которые позволяет сэкономить время на разработке функций интерфейса. В javascript-код мы можем окунуться позже, а пока что нам следует заняться разработкой наполнением и структурой нашей страницы.

HTML-наполнение нашей веб-страницы

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

<center>   
<a href="#modalwin" data-toggle="modal" class="btn btn-large">Display Window</a>

<a href="#bgchangemodal" data-toggle="modal" class="btn btn-large">Update the Background</a>
</center>

В центре демо-страницы вы можете видеть две кнопки. Каждая из них привязана к модальному окну, которое прописано прямо в коде HTML-страницы. Bootstrap позволяет разработчикам как загружать модальные окна, используя локальный HTML, так и включать удаленные файлы при помощи AJAX. Обратите внимание на то, что значения href привязаны к ID каждого модального блока.

<!-- first modal window -->
<div id="modalwin" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<header class="modal-header">
<a href="#" class="close" data-dismiss="modal">x</a>
<h3>Prepare to be Amazed <small>or easily amused :]</small></h3>
</header>

<div class="modal-body">
<p>This is a generic modal window, but look we can add images!</small></p>

<p><img src="images/jim-dwight-the-office.png" alt="Jim and Dwight from NBC's The Office" title="Jim and Dwight" class="img-rounded"></p>

<p>Close me by clicking anywhere outside the window, or by clicking the blue button.</p>

<p></p>
</div>

<footer class="modal-footer">
<a href="#" class="btn btn-primary" id="okwin01">Sounds Good!</a>
</footer>
</div> <!-- @end @modalwin -->

Наш первый пример – это просто текст с файлом изображения. Bootstrap предлагает стандарт для создания модальных окон при помощи трех разных секций: .modal-header, .modal-body и .modal-footer. Каждый класс может быть привязан к любому HTML-элементу, и должен отображать одно и то же. Вы также заметите небольшой X в углу, у которого будет задан анкорный атрибут data-dismiss.

Эти небольшие дополнения в библиотеку Bootstrap делают оформление модальных окон невероятно простым. Все компоненты уже готовы к использованию, вам нужно будет просто запомнить (или сохранить куда-нибудь) нужные коды. В основном внешнем DIV-элементе вы найдете 3 разных класса, которые очень важны. Кажется, что class=”modal hide fade” включает все стандартные настройки. Давайте взглянем на второе модальное окно.

<!-- BG color modal window -->
<div id="bgchangemodal" class="modal hide fade dark" role="dialog" aria-labelledby="bgModalUpdate" aria-hidden="true">
<header class="modal-header">
<a href="#" class="close" data-dismiss="modal">x</a>
<h3>Update the Background <small>just pick a color below</small></h3>
</header>

<div class="modal-body">
<div class="alert alert-info">
<a href="#" class="close" data-dismiss="alert">x</a>
Select a radio button and save changes to see the difference.
</div>

<input type="radio" id="bgdefault" name="bgradio" checked="checked">
<label for="bgdefault"><span></span>Default Color</label>

<input type="radio" id="bgpalegreen" name="bgradio">
<label for="bgpalegreen"><span></span>Pale Green</label>

<input type="radio" id="bgwisteria" name="bgradio">
<label for="bgwisteria"><span></span>Wisteria</label>

<input type="radio" id="bgsaffron" name="bgradio">
<label for="bgsaffron"><span></span>Saffron</label>

<input type="radio" id="bgcarnation" name="bgradio">
<label for="bgcarnation"><span></span>Carnation Pink</label>
</div>

<footer class="modal-footer">
<a href="#" class="btn" id="closewin02">Cancel</a>
<a href="#" class="btn btn-primary" id="okwin02">Save Changes</a>
</footer>
</div> <!-- @end #bgchangemodal -->

В этом модальном окне, в шапке и подвале, у нас используются очень похожие классы и элементы. Внутреннее наполнение тела документа также имеет небольшой информационный div с классом .alert-info. Bootstrap использует его для отображения оповещений, предупреждений и других диалоговых окон. Сейчас вы заметили, что мы добавили класс .dark к модальному контейнеру.

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

Уникальные CSS-стили

Так как в исходные каскадные таблицы стилей Bootstrap уже было внесено несколько сбросов, наш документ не такой уж и большой. У нас здесь несколько удобных классов, которые определяют пользовательские элементы ввода и темные модальные окна. Здесь вам не понадобится дополнительный CSS-код для правильной работы модальных окон, но все-таки стоит взглянуть на наши коды, чтобы понять, каким образом можно создать оформление для собственных модальных окон.

/** Bootstrap Dark Modal Styles **/
.modal-open .modal, .btn:focus {
outline: none !important;
}

.modal.dark { background-color: #2d3032; }
.modal.dark .modal-body {
background: #40464b;
}

.modal.dark .modal-header {
background: #2d3032;
border-bottom: 1px solid #2a2c2e;
}
.modal.dark .modal-header h1, .modal.dark .modal-header h2, .modal.dark .modal-header h3, .modal.dark .modal-header h4 {
color: #ccc;
}

.modal.dark .modal-footer {
background: #2d3032;
border-top: 1px solid #2a2c2e;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

Мы следовали специфике, представленной в оригинальном CSS-файле Twitter Bootstrap. Нам нужно убедиться в том, что каждый селектор вложен на достаточную глубину, чтобы стать основным блоком рендеринга. К некоторым параметрам мы применили !important, чтобы они отображались корректно. Собственные классы помогут вам создать более представительный вид для ваших окон.

Отображение модальных окон при помощи javascript

Давайте перейдем к js-файлу modals.js, в котором вам будет показано, как можно связать HTML-ссылки и скрытые окна вместе. Так как мы смотрим на коды и jQuery и Bootstrap, мы разберем отдельные фрагменты кода, чтобы вам было понятнее.

$(function(){
function hideModal(modalwindow){
$(modalwindow).modal('hide');
}

Этот код откроет DOM-проверку jQuery, и создаст новую функцию под названием hideModal(). Параметр internal – это jQuery-селектор, который сообщает о необходимости скрыть модальное окно. Небольшой отрывок кода, который сэкономит наше время на повторяющемся запуске одной и той же функции.

$('#okwin01').on('click', function(e){
e.preventDefault();
hideModal('#modalwin');
});

$('#okwin02').on('click', function(e){
e.preventDefault();
updateBGColor();
hideModal('#bgchangemodal');
});

Два ID, #okwin01 и #okwin02, определяют конкретные кнопки внутри двух окон. Это обе кнопки «ОК», которые скрывают форму. Когда по ним кликают, нам нужно ссылаться на функцию hideModal(), которую мы создали ранее. Но второе окно также запускает другую функцию под названием updateBGColor(). Она определяет на данный момент выделенную радио кнопку и изменяет цвет фона соответствующим образом. Не столь важно, все ли вы здесь понимаете, главное, что этот маленький скрипт работает.

  $('#closewin02').on('click', function(e){
e.preventDefault();

var currentbg = rgb2hex($('body').css('backgroundColor'));
resetRadioBtns(currentbg);
hideModal('#bgchangemodal');
});
});

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

Отображаем модальные окна на JavaScript при помощи Bootstrap

Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.


В завершение

Bootstrap – это невероятная библиотека, которая предлагает нам множество уникальных виджетов и свойств дизайна. Вы можете потратить недели на игры с различными функциями и возможностями Bootstrap. К тому же, встроенные сбросы CSS помогают вам начинать проект как бы с чистого листа.

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