Lorsque vous utilisez la boîte de dialogue modale bootstrap, vous devez écrire la boîte de dialogue HTML sur la page. S'il existe de nombreux endroits dans une page qui nécessite une boîte de dialogue, cela signifie que vous devez en écrire plusieurs, ce qui semble très gênant. Je ne suis pas habitué à la méthode de la boîte de dialogue modale bootstrap, j'ai donc fait une encapsulation et une expansion simples, ajouté un titre, une largeur et une hauteur personnalisés, et affiché dans le centre en fonction de la largeur et de la hauteur.
Propriétés par défaut:
ID: "Modal", // ID pop-up
Titre: "Dialog", // Titre pop-up
Largeur: "600", // Largeur de fenêtre popt-up,% n'est pas prise en charge pour le moment
Hauteur: "500", // Hauteur de fenêtre populaire, ne prend pas en charge%
Backdrop: Vrai, // Si l'occlusion est affichée, c'est la même chose que la boîte modale bootstrap native
Clavier: vrai, //, qu'il s'agisse d'activer la touche ESC pour quitter, c'est la même chose que la boîte modale bootstrap native
Remote: "", // Chargez une URL à distance, tout comme la boîte modale bootstrap native
OpenEvent: NULL, // Fonction de rappel après la fenêtre contextuelle est ouverte
CloseEvent: NULL, // Fonction de rappel après la fenêtre contextuelle est fermée
Okevent: NULL // Cliquez sur le bouton OK pour la fonction de rappel
Comment utiliser:
1. Définir via HTML DATA- * Attribut
Copiez le code comme suit: <a href = "#" data-remote = "test.html" data-mtitle = "modal1" data-id = "m1" data-width = "600" data-okevent = "ok ()"> pop-up démo </a>
2. Initialiser via JS
$ (". mzdialog"). mzdialog ();
Des lieux et des bugs inappropriés, voici juste une référence pour l'apprentissage et vous pouvez les modifier et les améliorer vous-même
1. Le plug-in Bootstrap-Mzdialog ne comporte que 2 boutons pour le moment. Annuler et confirmer, et les boutons personnalisés ne sont pas encore pris en charge. Vous pouvez modifier le code source et ajouter cette fonction.
2. Vous ne pouvez utiliser que la méthode HTML Data- * pour la définir. Vous ne prendz pas en charge les paramètres de configuration lors de l'initialisation JS. Vous pouvez modifier le code source et étendre cette fonction par vous-même.
3. Le poids et la hauteur ne doivent pas être utilisés.
4. Notez que la fonction de rappel ici doit être dans un format de chaîne, comme Okevent: "OK ()". Ici, la fonction définie par la fonction OK elle-même, n'oubliez pas d'inclure ();
JS Code source:
/ * --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Backdrop: true, // si l'occlusion s'affiche, la même que le clavier de boîte modale bootstrap native: true, // si la clé ESC est permis de sortir, identique à la boîte modale modale native native: "", // Chargement de l'URL à distance Okevent: null // Cliquez sur le bouton OK pour la fonction de rappel}; // Fenêtre de création dynamique var créationaliog = {init: function (opts) {var _self = this; // fenêtre d'insert dynamique var d = _self.dhtml (opts); $ ("corps"). Ajouter (d); var modal = $ ("#" + opts.id); // initialiser la fenêtre modal.modal (opts); // Position de taille de fenêtre var h = modal.height () - modal.find (". Modal-header"). Eterheight () - modal.find (". Modal-footer"). Eterheight () - 5; modal.css ({'margin-left': opts.width / 2 * -1, 'margin-top': opts.height / 2 * -1, 'top': '50%'}). find (". modal-body"). InnerHeight (h); modal // show window.modal ('show') // supprimer la fenêtre après avoir caché la fenêtre html .on ('Hidden', function () {modal.remove (); $ (". modal-backdrop"). retire (); if (opts.closeEvent) {evv. if (opts.openevent) {eval (opts.openevent);} // Bouton de liaison Event $ (this) .find (". OK"). Cliquez sur (fonction () {if (opts.okevent) {var rest = eval (opts.okevent); if (ret) {modal.modal ('hide');}}});}); }, dhtml: function (o) {return '<div id = "' + o.id + '" role = "dialog" aria-labelledby = "mymodallabel" aria-hidden = "true"> <v> <button type = "button" data-dimismis = "modal" aria-hidden = "true"> × </ bouton> <h3 id = "MyModallabel"> '+ O.title +' </h3> </div> <div> <p> Chargement ... </p> </div> <div> <Button Data-Dismiss = "Modal" aria-Hidden = "true"> Annuler </ Button> </ Button> Confirm </utton> </div> </div> '; }}; return this.each (function () {$ (this) .click (function () {var opts = $ .extend ({}, par défaut, {id: $ (this) .attr ("data-id"), titre: $ (this) .attr ("data-mtitle"), width: $ (this) .attr ("data-width"), height: height: $ (this). Backdrop: $ (this) .attr ("data-backdrop"), clavier: $ (this) .attr ("data-keyboard"), distant: $ (this) .attr ("data-remote"), openEvent: $ (this) .attr ("data-openevent"), closeevent: $ (this) .attr ("data-closeevent"),,, closeEvent: $ (this) .ATTR ("data-closeevent"),,, closeEvent: $ (this) .ATTR ("Data-Closeevent"),,, CloseEvent: $ (this) .ATTR ("Data-Closeevent"),,,, $. Okevent: $ (this) .attr ("data-okevent")}); }; }) (jQuery);Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.