Modal bezieht sich in Bootstrap auf „Modal Box“, ein Unterformular, das das übergeordnete Formular abdeckt. Der Zweck besteht darin, Inhalte aus einer separaten Quelle anzuzeigen, ohne das übergeordnete Formular zu verlassen. Modale Boxen können der Website auffällige Eingabeaufforderungen und Interaktionen für Benutzerbenachrichtigungen, Besucherinteraktionen, Nachrichtenwarnungen oder benutzerdefinierte Inhaltsinteraktionen hinzufügen.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, Bootsrap-Version 3.3.7, DELL G3-Computer
Modal ist ein untergeordnetes Formular, das das übergeordnete Formular abdeckt. Typischerweise besteht der Zweck darin, Inhalte aus einer separaten Quelle anzuzeigen, die eine gewisse Interaktion ermöglichen, ohne das übergeordnete Formular zu verlassen. Unterformulare bieten Informationen, Interaktion und mehr.
Bootstrap-Popup-Modalbox-Stil
Verwenden Sie das JavaScript-Modalbox-Plugin von Bootstrap, um Ihrer Website auffällige Eingabeaufforderungen und Interaktionen für Benutzerbenachrichtigungen, Besucherinteraktionen, Nachrichtenwarnungen oder benutzerdefinierte Inhaltsinteraktionen hinzuzufügen.
Schließen Sie das Modalfeld:
Klicken Sie auf das
Funktionsprinzip
Popup-Modals werden mit HTML, CSS und Javascript erstellt. Sie liegen über anderen Präsentationselementen im Dokumentieren und entfernen Sie Scroll-Ereignisse aus dem , damit der Inhalt des Modals selbst gescrollt werden kann.
Klicken Sie auf den „Hintergrund“ (grauer Hintergrundbereich) der modalen Box, um die dynamische Modulbox automatisch zu schließen.
Bootstrap unterstützt jeweils nur ein modales Fenster und keine verschachtelten Modi, da Überlagerungen zu einer schlechten Benutzererfahrung führen.
Die modale Box verwendet position: Fixed, was sich stark von anderen Elementen in der Präsentation unterscheidet. Bitte platzieren Sie den HTML-Code des Popup-Modalfelds so weit wie möglich auf der obersten Ebene, um Störungen durch andere Elemente zu vermeiden. Insbesondere wenn das .modal-Ereignis auch in einem anderen festen Element definiert ist, können Probleme auftreten.
Es wird auch durch das Attribut „Position: Fest“ beeinflusst. Bei der Verwendung modaler Boxen auf Mobilgeräten sind einige Vorsichtsmaßnahmen zu beachten.
Gemäß der semantischen Definition von HTML5 hat das autofocusHTML-Attribut keine Auswirkung auf die modale Bootstrap-Box. Um den gleichen Effekt zu erzielen, müssen Sie JavaScript verwenden.
Normale Modalbox
.modal: Der äußerste Container der Modalbox.
.modal-dialog: Modaler Boxcontainer.
.modal-content: Platzieren Sie den Inhalt der modalen Box und legen Sie den Stil der modalen Box fest.
.modal-header: Modaler Box-Header.
.modal-title: modaler Boxtitel.
.modal-body: Der Hauptinhalt der Modalbox.
.modal-footer: Inhalt der modalen Box-Fußzeile.
<div class="modal fade" id="modal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">标题</h5>
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row mt-5">
<div class="col">
<button class="btn btn-primary" data-toggle="modal" data-target="#modal1">普通的模态框</button>
</div>
</div>
</div>
Nach dem Login kopieren
Modalboxen mit Bildlaufleisten
Wenn das Benutzeransichtsfenster (Popup-Inhaltsbereich) oder das Modal des Geräts länger wird, wird die Seite automatisch gescrollt.
<div class="modal fade" id="modal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">标题</h5>
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row mt-5">
<div class="col">
<button class="btn btn-primary" data-toggle="modal" data-target="#modal1">有滚动条的模态框</button>
</div>
</div>
</div>
Nach dem Login kopieren
Vertikal zentriertes Modal
Fügen Sie .modal-dialog-centered zum Dialogfeld .modal-dialog hinzu, um das Modal vertikal zu zentrieren.
Fügen Sie das Gittersystem „.container-fluid“ zu „.modal-body“ hinzu. Sie können das Bootsrap-Gittersystem in dynamischen Ansichtsfenstern verwenden und es normalerweise überall in der Definition der Gittersystemklasse verwenden.
Das obige ist der detaillierte Inhalt vonWas bedeutet Bootstrap-Modal?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen 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
Funktionsprinzip
