Einführung in die Verwendung von Popup-Box_Javascript-Kenntnissen für das BootStrap-Modell

Zuvor haben wir die Verwendung der Bootstrap-Registerkarte erklärt. Heute erfahren wir mehr über die Verwendung des Modell-Popup-Fensters in Bootstrap.

Wirkung:

Code:

<input id="btntext" type="button" value="添加文本组件" data-toggle="modal" data-target="#myModal" href="../SysManage/ZuJianManage.aspx"/>
<!-- Modal -->
<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-header"><button class="close" type="button" data-dismiss="modal">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body"></div>
</div>

Es ist ganz einfach, das ist es.

Hinweis: Das Datenzielattribut verweist auf die ID des Modells. Klicken Sie also auf die Schaltfläche und das Modell wird angezeigt.

Natürlich können Sie es auch mit js steuern.

Der folgende Code:

Anzeigen: $('#myModal').modal('show');

Ausblenden: $('#myModal').modal('hide');

Schalter: $('#myModal').modal('toogle');

Ereignis: $('#myModal').on('hidden', function () {// etwas tun…});

Hinweis: Ich habe hier das href-Attribut verwendet, um das Modell an eine Remote-URL weiterleiten zu lassen. Natürlich können Sie den gewünschten Inhalt direkt in den Modellkörper schreiben.

Schauen Sie sich die Div-Struktur des Modells genau an und Sie werden verstehen, dass „Model-Body“ den Inhalt und „Model-Header“ den Header darstellt. Wenn Sie unten zwei Schaltflächen hinzufügen möchten, müssen Sie Folgendes verwenden Code.

<div class="modal-footer">
<a href="#" class="btn">关闭</a>
<a href="#" class="btn btn-primary">保存</a>
</div>

Hinweis: Wenn Sie die Breite des Modells festlegen möchten, müssen Sie ein Layout hinzufügen. Fügen Sie einfach das Modell in den Codeblock unten ein und legen Sie die Breite des Modells fest. style="width:500px". Sie können den Span-Stil übrigens nicht direkt in die Klasse einfügen. .

<div class="container"></div>

Das Obige ist die vom Herausgeber eingeführte Verwendung des BootStrap-Modell-Popup-Felds. Ich hoffe, es wird für alle hilfreich sein!