1. Strukturanalyse
Die modalen Popup-Boxen im Bootstrap-Framework verwenden die Stile „modal“, „modal-dialog“ und „modal-content“, und der eigentliche Inhalt des Popup-Fensters wird in „modal-content“ platziert ". Sein Hauptteil Es umfasst auch drei Teile:
☑ Der Header des Popup-Felds, im Allgemeinen durch „modal-header“ dargestellt, enthält hauptsächlich den Titel und die Schaltfläche zum Schließen
☑ Der Text der Popup-Box, normalerweise dargestellt durch „modal-body“, der Hauptinhalt der Popup-Box
☑ Der Fuß des Popup-Felds, normalerweise dargestellt durch „modal-footer“, platziert hauptsächlich die Bedienschaltflächen
<div class="modal" id="mymodal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">模态弹出窗标题</h4> </div> <div class="modal-body"> <p>模态弹出窗主体内容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">保存</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->
2. Die Datenumschaltklasse löst das Popup-Fenster aus (kein JS erforderlich)
1. Modale Popup-Fensterdeklaration , es müssen nur zwei notwendige Attribute angepasst werden: Datenumschaltung und Datenziel.
<!-- data-target触发模态弹出窗元素 --> <button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">通过data-target触发</button> <!-- 模态弹出窗内容 --> <div class="modal" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">模态弹出窗标题</h4> </div> <div class="modal-body"> <p>模态弹出窗主体内容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">保存</button> </div> </div> </div> </div>
2. Datenparameterbeschreibung
Zusätzlich zur Steuerung modaler Popup-Fenster durch Datenumschaltung und Datenziel bietet das Bootstrap-Framework auch andere benutzerdefinierte Datenattribute für modale Popup-Boxen zur Steuerung modaler Popup-Fenster.
3. JS-Trigger-Popup-Fenster (JS muss geschrieben werden)
1. Zusätzlich zur Verwendung benutzerdefinierter Attribute zum Auslösen modaler Popup-Fenster können Sie modale Popup-Fenster auch über JavaScript-Methoden auslösen. Wird ausgelöst, indem einem Element ein Ereignis zugewiesen wird. Geben Sie beispielsweise einer Schaltfläche ein Klickereignis und lösen Sie dann ein modales Popup-Fenster aus.
HTML:
<div class="modal" id="mymodal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">模态弹出窗标题</h4> </div> <div class="modal-body"> <p>模态弹出窗主体内容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">保存</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->
JS:
$(function(){ $(".btn").click(function(){ $("#mymodal").modal("toggle"); }); });
2. Wenn Sie JavaScript zum Auslösen eines modalen Popup-Fensters verwenden, bietet das Bootstrap-Framework einige Einstellungen, hauptsächlich einschließlich
Eigenschaftseinstellungen:
$(function(){ $(".btn").click(function(){ $("#mymodal").modal({ keyboard:false }); }); });
Parametereinstellungen:
Ereigniseinstellungen:
$('#myModal').on('hidden.bs.modal', function (e) { // 处理代码... })
4. Popup-Fenstergröße
Das Bootstrap-Framework bietet auch verschiedene Größen für modale Popups.
Eine davon ist der große Stil „modal-lg“.
<divclass="modal-dialog modal-lg"> <divclass="modal-content"> ... </div> </div>
Das andere ist der kleine Größenstil „modal-sm“.
<divclass="modal-dialog modal-sm"> <divclass="modal-content"> ... </div> </div>
Das Obige ist eine vollständige Einführung in die Implementierungsmethode des Bootstrap-Popup-Fensters. Ich hoffe, es wird für das Lernen aller hilfreich sein.