Wenn Sie das Dialogfeld "Bootstrap Modal" verwenden, müssen Sie das Dialogfeld HTML auf der Seite schreiben. Wenn es viele Stellen in einer Seite gibt, für die ein Dialogfeld erforderlich ist, müssen Sie mehrere eine schreiben, was sich sehr problematisch anfühlt. Ich bin nicht an die Dialogfeld -Methode des Bootstrap -Modals gewöhnt, daher habe ich eine einfache Kapselung und Erweiterung erstellt, einen benutzerdefinierten Titel, eine Breite und Höhe hinzugefügt und in der Mitte gemäß Breite und Höhe angezeigt.
Standardeigenschaften:
ID: "Modal", // Popup-ID
Titel: "Dialog", // Pop-up-Titel
Breite: "600", // Popt-up-Fensterbreite, % wird vorerst nicht unterstützt
Höhe: "500", // beliebte Fensterhöhe, unterstützt nicht %
Hintergrund: TRUE, // Ob die Okklusion angezeigt wird, ist das gleiche wie die native Bootstrap -Modalbox
Tastatur: TRUE, // ob die ESC -Taste das Beenden aktivieren soll, es ist dasselbe wie die native Bootstrap -Modalbox
Remote: "", // Remote -URL laden, genau wie die native Bootstrap -Modalbox
OpenEvent: NULL, // Rückruffunktion nach dem Öffnen des Popup-Fensters
CloseEvent: NULL, // Rückruffunktion Nachdem das Popup-Fenster geschlossen ist
Okevent: NULL // Klicken Sie auf die Schaltfläche OK, um die Rückruffunktion zu erhalten
Wie man verwendet:
1. Definieren Sie durch HTML-Datenattribut
Kopieren Sie den Code wie folgt: <a href = "#" data-remote = "test.html" data-mtitle = "modal1" data-id = "m1" data-width = "600" data-okevent = "OK ()"> Pop-up-Demo </a>
2. durch JS initialisieren
$ (". Mzdialog"). Mzdialog ();
Unsachgemäße Orte und Fehler, hier ist nur eine Referenz für das Lernen und Sie können sie selbst ändern und verbessern
1. Das Bootstrap-Mzdialog-Plug-In hat momentan nur 2 Tasten. Stornieren und bestätigen, und benutzerdefinierte Tasten werden noch nicht unterstützt. Sie können den Quellcode ändern und diese Funktion hinzufügen.
2. Sie können nur die HTML-Daten-* -Methode verwenden, um sie zu definieren. Sie unterstützen die Konfigurationsparameter während der JS -Initialisierung nicht. Sie können den Quellcode ändern und diese Funktion selbst erweitern.
3. Gewicht und Größe sollten nicht verwendet werden.
4. Beachten Sie, dass die Rückruffunktion hier in einem String -Format wie Okevent sein muss: "OK ()". Hier, die von der OK -Funktion selbst definierte Funktion, denken Sie daran, () zu integrieren.
JS Quellcode:
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ Backdrop: TRUE, // Ob die Okklusion angezeigt wird, das gleiche wie die native Bootstrap-Modal-Box-Tastatur: TRUE, // Ob die Taste der ESC zum Beenden aktiviert ist, wie der native Bootstrap-Modal-Box-Remote: "", // laden Sie die Remote-URL. Okevent: NULL // Klicken Sie auf die Schaltfläche OK zur Rückruffunktion}; // Dynamisches Erstellungsfenster var createdialog = {init: function (opts) {var _self = this; // Dynamisches Einfügenfenster var d = _self.dhtml (opts); $ ("Körper"). Anhänge (d); var modal = $ ("#"+optts.id); // Fenster modal.modal (opts) initialisieren; // Fenstergröße Position var h = modal.height ()-modal.find (". Modal-Header"). OterHeight ()-modal.find ("Modal-Footer"). Äußere ()-5; modal.css ({'margin-linft': opts.width/2*-1, 'margin-top': opts.height/2*-1, 'top': '50%'}). Find (". Modal-Body"). Innerheight (h); Modal // window.modal ('show') // das Fenster nach dem Versteck des Fensters html .on ('Hidden', function () {modal.remove (); $ (". if (opts.OpenEvent) {eval (optts.OpenEvent); }, dhtml: function (o) {return '<div id = "'+o.id+'" rollen = "dialog" aria-labelledby = "myModallabel" aria-hidden = "true"> <div> <button type id = "myModallabel"> '+o.title+' </h3> </div> <div> <p> Laden ... </p> </div> <div> <button data-dismiss = "modal" aria-hidden = "true"> abbrechen </button> </button> </div> </div>; }}; return this.each (function () {$ (this) .click (function () {var opts = $ .extend ({}, Standards, {id: $ (this) .attr ("data-id"), Titel: $ (this) .attr ("Data-Mtitle"), WidththThTHTHTHH. Backdrop: $ (this) .Attr ("Data-backdrop"), Tastatur: $ (this) .Attr ("Data-Keyboard"), Remote: $. Okevent: $ (this) .Attr ("data-acevent")}); }; }) (jQuery);Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.