Zuvor haben wir die Verwendung der Registerkarte Bootstrap erläutert. Heute erfahren wir die Verwendung von Modellpop-up-Fenstern in Bootstrap.
Wirkung:
Code:
<input id = "btnText" type = "button" value = "textkomponente" data-toggle = "modal" data-target = "#myModal" href = "../ sysmanage/zujianmanage.aspx"/> <!-modal-> <dividal "mymodal" taillieren "tastex Data-dismiss = "modal"> × </button> <h3 id = "myModallabel"> Modal-Header </h3> </div> </div>
Es ist sehr einfach, das ist alles.
HINWEIS: Die Data-Target-Eigenschaft zeigt auf die ID des Modells. Klicken Sie also auf die Schaltfläche und das Modell wird angezeigt.
Natürlich können Sie JS auch verwenden, um es zu kontrollieren.
Der folgende Code:
Show: $ ('#myModal'). Modal ('show');
Hide: $ ('#MyModal'). Modal ('Hide');
Switch: $ ('#MyModal'). Modal ('Toogle');
Ereignis: $ ('#MyModal'). On ('Hidden', function () {// etwas tun…});
Hinweis: Ich habe das HREF -Attribut hier verwendet, um das Modell eine URL abzurufen. Natürlich können Sie schreiben, was Sie direkt in den Modellkörper wollen.
Wenn Sie sich die DIV-Struktur des Modells sorgfältig ansehen, werden Sie verstehen, dass Modellkörper den Inhalt darstellt und der Modellkopf der Header ist. Wenn Sie also zwei Schaltflächen unten hinzufügen möchten, müssen Sie den folgenden Code verwenden.
<div> <a href = "#"> schließen </a> <a href = "#"> speichern </a> </div>
Hinweis: Wenn Sie die Breite des Modells festlegen möchten, müssen Sie das Layout hinzufügen. Es soll das Modell im folgenden Codeblock platzieren und die Breite des Modells festlegen. style = "Breite: 500px". Übrigens können Sie es nicht einfach mit dem Spannstil in die Klasse setzen. .
<div> </div>
Das obige ist die Verwendung der vom Editor vorgestellten Popup-Box des Bootstrap-Modells. Ich hoffe, es wird für alle hilfreich sein!