Модальная коробка (модальная) - это детская форма, которая накладывается на родительскую форму. Как правило, цель состоит в том, чтобы отобразить контент из отдельного источника, который может иметь некоторое взаимодействие, не оставляя родительскую форму. Подпрограмма может предоставить информацию, взаимодействие и т. Д.
Если вы хотите ссылаться на функциональность плагина отдельно, вам необходимо ссылаться на Modal.js. Или, как упомянуто в главе обзора плагинов Bootstrap, вы можете обратиться к Bootstrap.js или сжатым версиям Bootstrap.min.js.
1. Использование
Вы можете переключить скрытое содержимое плагина модальной коробки (модальная):
Через атрибут данных: Установите атрибут data-toggle = "modal" на элементе контроллера (например, кнопка или ссылка) и установите Data-target = "#идентификатор" или href = "#идентификатор", чтобы указать конкретный флажок Modal для переключения (с id = "идентификатор").
С JavaScript: Используя эту технику, вы можете вызвать модальную коробку с id = "идентификатор" через простую линию JavaScript:
$ ('#Идентификатор'). MODAL (Опции)
2. Простой пример
div id = "mymodal"> <div> <button type = "button" data-dismiss = "modal"> x </button> <h3> Название на циферблатном поле </h3> </div> <div> <p> Body Bode </p> </div> <div> <a href = "#" data-dismiss = "modal"> Cancel </a> <a href = "#"#"#"#"#"#"#"#" data-dismiss = "modal"> подтвердить </a> </div> </div>
Модальный диалоговое окно может быть вызвано непосредственно, используя кнопку или ссылку, и это простое использование:
Скопируйте код следующим образом: <a href = "#modal1" rol = "кнопка" data-toggle = "Modal"> Добавление договора </a>
Кроме того, когда вам нужно сделать диалоговое окно очистить данные формы каждый раз, когда она открывается, следующим образом:
Кода кода выглядит следующим образом: $ ('#modal1'). Modal ('hide');
$ ("#modal1"). On ("hidden", function () {$ ('#form1') [0] .reset ();}); // После добавления контракта очистите операцию формы
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Выше приведено в этой статье, я надеюсь, что это будет полезно для каждого обучения.