Umfassende Analyse der Implementierungsmethode der Bootstrap-Popup-Fenster_Javascript-Fähigkeiten

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">&times;</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">&times;</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">&times;</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.