Heim > Web-Frontend > js-Tutorial > Hauptteil

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

WBOY
Freigeben: 2016-05-16 15:28:34
Original
1340 Leute haben es durchsucht

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 -->
Nach dem Login kopieren

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>
Nach dem Login kopieren

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 -->
Nach dem Login kopieren

JS:

 $(function(){
 $(".btn").click(function(){
 $("#mymodal").modal("toggle");
 });
 });
Nach dem Login kopieren

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
 });
 });
});
Nach dem Login kopieren

Parametereinstellungen:

Ereigniseinstellungen:

$('#myModal').on('hidden.bs.modal', function (e) {
 // 处理代码...
})
Nach dem Login kopieren

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>
Nach dem Login kopieren

Das andere ist der kleine Größenstil „modal-sm“.

<divclass="modal-dialog modal-sm">
 <divclass="modal-content"> ... </div>
</div>
Nach dem Login kopieren

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.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage