При использовании диалогового окна Bootstrap Modal вам нужно написать диалоговое окно HTML на странице. Если на странице есть много мест, для которых требуется диалоговое окно, это означает, что вам нужно написать несколько, что кажется очень неприятным. Я не привык к методу метода Bootstrap Modal, поэтому я сделал простую инкапсуляцию и расширение, добавил пользовательский заголовок, ширину и высоту и отображался в центре в соответствии с шириной и высотой.
Свойства по умолчанию:
Идентификатор: «Модальный», // Идентификатор всплывающего окна
Название: «Диалог», // всплывающее название
Ширина: "600", // Ширина окна запчасти, % не поддерживается на данный момент
Высота: "500", // Популярная высота окна не поддерживает %
Фон: True, // отображается ли окклюзия, она такая же, как и нативная модальная коробка начальной загрузки
Клавиатура: true, // включить ли выход клавиша ESC, она такая же, как и нативная модальная коробка начальной загрузки
Remote: "", // Загрузить удаленный URL, как и нативная модальная коробка начальной загрузки
OpenEvent: NULL, // Функция обратного вызова после открытия всплывающего окна
CloseEvent: NULL, // Функция обратного вызова после закрытия всплывающего окна
OKEVENT: NULL // Нажмите кнопку OK, чтобы функционировать обратный вызов
Как использовать:
1. Определить через HTML Data-* Атрибут
Скопируйте код следующим образом: <a href = "#" data-remote = "test.html" data-mtitle = "modal1" data-id = "m1" data-width = "600" data-okevent = "ok ()"> всплывающее демо </a>
2. Инициализируйте через JS
$ (". Mzdialog"). mzdialog ();
Неправильные места и ошибки, вот лишь ссылка на обучение, и вы можете изменить и улучшить их самостоятельно
1. Плагин Bootstrap-Mzdialog имеет только 2 кнопки на данный момент. Отменить и подтвердить, и пользовательские кнопки еще не поддерживаются. Вы можете изменить исходный код и добавить эту функцию.
2. Вы можете использовать только метод HTML Data-* для его определения. Вы не поддерживаете параметры конфигурации во время инициализации JS. Вы можете изменить исходный код и самостоятельно расширить эту функцию.
3. Вес и высота не должны использоваться.
4. Обратите внимание, что функция обратного вызова здесь должна быть в формате строки, такого как Okevent: "OK ()". Здесь функция, определенная самой функцией OK, не забудьте включить ();
Исходный код JS:
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------. Фон: true, // отображается ли окклюзия, так же, как и нативная модальная клавиатура Bootstrap Modal Box: true, // независимо от того, будет ли ключ ESC для выхода, так же, как и нативная модальная коробка Bootstrap Remote: «», // Загрузить удаленный URL, так же, как и нативная модальная коробка Bootstrap OpenEvent: NULL, // Callback Function: NOULLEVENT: null. okevent: null // Нажмите кнопку ОК, чтобы функция обратного вызова}; // Окно динамического создания var createialog = {init: function (opts) {var _self = this; // динамическое окно вставки var d = _self.dhtml (opts); $ ("body"). Append (d); var modal = $ ("#"+opts.id); // инициализировать Window modal.modal (Opts); // положение размера окна var h = modal.height ()-modal.find (". Modal-header"). OuterHeight ()-modal.find (". Modal-footer"). OuterHeight ()-5; modal.css ({'margin-left': opts.width/2*-1, 'margin-top': opts.height/2*-1, 'top': '50%'}). Найти (".. Модальное тело"). innerheight (h); MODAL // SHOW window.modal ('show') // Удалить окно после скрытия окна html .on .on ('hidden', function () {modal.remove (); $ (". Modal-backdrop"). remove (); if (opts.closeevent) {evall (opts.closeevent); if (opts.openevent) {eval (opts.openevent); }, dhtml: function (o) {return '<div id = "'+o.id+'" rol = "dialog" aria-labelledby = "mymodallabel" aria-hidden = "true"> <div> <button Type = "кнопка" data-dismiss = "modal" aria-hidden = "> × </hotue> <H3 id = "mymodallabel"> '+o.title+' </h3> </div> <div> <p> Загрузка ... </p> </div> <div> <Кнопка DATA-DISMISS = "MODAL" ARIA-SIDDEN = "TRUE"> CANCEL </Button> <tutry> Подтверждение </button> </div> </div> '; }}; вернуть это. На фоне: $ (this) .attr ("data-backdrop"), клавиатура: $ (this) .attr ("data-keyboard"), удаленное: $ (this) .attr ("data-remote"), openevent: $ (this) .attr ("data-openestent"), близкий: $ (this). okevent: $ (this) .attr ("Data-Okevent")}); }; }) (jQuery);Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.