Dailog на основе Bootstarp

Введение в начальную загрузку

Bootstrap из Twitter в настоящее время является популярной фронтальной структурой.

Bootstrap основан на HTML, CSS и JavaScript. Это просто и гибко, что делает веб -разработку быстрее. Разработанный дизайнером Twitter Марком Отто и Джейкобом Торнтоном, это структура CSS/HTML.

Bootstrap предоставляет элегантные спецификации HTML и CSS, которые записаны на языке динамического CSS меньше. Bootstrap был популярен с момента его запуска и был популярным проектом с открытым исходным кодом на Github, включая новости MSNBC от НАСА. Фреймворки, которые более знакомы для домашних мобильных разработчиков, таких как фронтальная структура с открытым исходным кодом WEX5, также основаны на исходном коде Bootstrap для оптимизации производительности.

1.1. Помогите документировать ключевые слова

Boostrap Modal Box OaoDailog

1.2. Сценарии использования

Когда кнопку нажимается на веб -странице, пользователь должен запросить подтверждение, и пользователь может продолжать выполнять только выполнение, или пользователь нажал кнопку «Отмена», чтобы отменить выполнение;

Когда вы нажимаете, чтобы просмотреть на веб-странице, и отображаемые данные должны отображаться с помощью всплывающего окна, вы можете использовать OAoDailog

1.3. Схематическая диаграмма

MODAL на основе BOOSTRAP3.0, jQuery1.9

1.4. Инструкции для использования

Зачем вам oaodailog?

а Поскольку модал, предоставленный Boostrap3.0, модальный скрытый код DIV должен быть определен на странице. Пользователь записывает контент, который будет отображаться в Div. Если на странице есть несколько модальных ящиков, необходимо записать несколько скрытых модальных ящиков, которые, несомненно, являются избыточными.

беременный Поскольку у модала по умолчанию нет кнопки подтверждения и отмены, конечно, мы можем написать две кнопки в скрытом DIV модального поле, но нам также необходимо написать JS для мониторинга операций, выполняемых после нажатия кнопки подтверждения. В то же время операции, выполняемые кнопкой подтверждения, связаны с нажатыми пользователем данных при всплывании. Как передаются данные, начальная загрузка не предоставляет нам.

в OAODAILOG версия 1.0.0 в основном решает проблему неудобного использования модальных коробок Bootstrap и избыточного кода.

Изображение воспроизведения:

Начните

1. Представьте oaodailog.js

Код:

 <script type = "text/javascript" src = "$ {ctx}/static/jquery/jqueryapi/oaodialog/oao.dialog.js" charset = "utf-8"> </script>

2. Позвоните в код, который отображает всплывающее окно

Код:

 oao.dialog ({заголовок: «Удалить коробку с приглашением», «Контент:« Пожалуйста, подтвердите, действительно ли он удален, он не будет восстановлен после удаления! », OK: function () {oao.dialog.close ();}});

Это базовый и наиболее распространенный способ использовать всплывающее окно подтверждения.

1.5. API

oao.dialog (): этот метод является методом создания всплывающей коробки. Продолжаемый параметр является объектом JSON. Конечно, вы ничего не можете пройти, и появится пустое всплывающее окно, что не является проблемой. Следующее описывает значение и значения по умолчанию каждого параметра.

• oao.dialog.close (): закройте модальную коробку

1.6. Функции, которые должны поддерживаться 1. В настоящее время содержание всплывающего окна поддерживает только текст и статический HTML и не поддерживает запросы URL.

2. В настоящее время только две кнопки могут отображаться больше всего, а пользовательские кнопки не поддерживаются.

3. Текущее положение и размер всплывающего окна не поддерживают настройку

4. В настоящее время только одна всплывающая коробка может появиться одновременно, и она не поддерживает всплывающую еще одну модальную коробку во всплывающем окне (модаль Bootstrap не поддерживается в базовом слое)

Оставайтесь с нами, увидимся в следующей версии.

 /*!* oaodialog 1.0.0* Автор: xufei* Дата: 2015-7-9 1: 32* http: //www.oaoera.com* Copyright © 2014 www.oaoera.com Inc. Все права защищены. Шанхай ICP № 13024515-1 Shanghai Yixin Ecommerce Co., Ltd. функция (настройки) {var defaultsettings = {title: «Приглашение», контент: «», okval: «Подтверждение», каканальваль: «cancel», ok: function () {$ ("#oaomodal"). Modal ('hide');}, cancel: function () {$ ("#oaomodal").). DefaultsTtings, Настройки ||. aria-hidden =/"true/"> "+" <div class =/"modal-dialog/"> "+" <div class =/"modal-content/"> "+" <div class =/"modal-header/"> "+" <button type =/"class/" close/"data-dismiss =/" modal/"aria-label =/" class =/"close data-dismiss =/" modal/"aria-label =" class/"close/" "aria-label =/" "close/" "aria-label =" close/"" close/""/"" aria-hidden =/"true/"> × </span> </button> "+" <h4 class =/"modal-title/"> </h4> "+" </div> "+" <div class =/"modal-body/" style =/"text-align: centre;/"> "+" </div> "+" <div class =/"modal-foter:/"> "+" </div> "+" <div class =/""/"/"> "</div>"+"<div Class =/" "/"/">" </div> "+" <div Class =/" class =/"btn btn-default modalcancel/"> </button> "+" <button type =/"class =/" btn btn-primary modalok/"> </button>"+"</div>"+"</div>"+"</div>" </div> "; $ (modelhtml); $ (". Modalok", $ modelhtml) .Text (oao.settings.okval); $ (". Modalcancel", $ modelhtml) .Text (OAO .sttings.cancalval); $ (". Modal-Title", $ modelhtml) .Text (oao.settings.title); $ (". Modal-Body", $ modelhtm l) .html (oao.settings.content); if (! oao.settings.ok) {$ (". Modalok", $ modelhtml) .Remove ();} if (! oao. настройки Для диалога всплывающего окна oao.dialog = function (settings) {futus = oao.init (settings); oao.initcontent (); // метод вызова $ ('#oaomodal'). On ('hidden.bs.modal', функция (e) {if (oao.settings.close) {oao.settings.close ();} $ ("#oaomodal"). remove ();}) if (oao.settings.ok) {$ ("#oaomodal .modalok"). Click (settings.ok);} if (oao.seSts.cancel) .modalcancel "). Click (stens.cancel);} $ ("#oaomodal "). Modal ('show'). css ({" margin-top ": function () {return ($ (this) .height ()/ 2-200);}) ;;} // Метод закрыть oao.dial.cl. function () {$ ("#oaomodal"). modal ('hide');}