Heim > Artikel > Web-Frontend > Gibt es eine Popup-Ebene im Bootstrap?
Gibt es eine Popup-Ebene im Bootstrap?
- WBOYOriginal
- 2022-06-16 15:57:001867Durchsuche
Es gibt eine Popup-Ebene in Bootstrap; Sie können das Popover-Plugin verwenden, um die Popup-Ebene zu implementieren. Das Plug-in kann bestimmte Inhalte und Tags entsprechend den Anforderungen generieren und die generierten Inhalte im Pop platzieren -up-Box, die durch das angegebene Element ausgelöst wird. Die Syntax zum Aktivieren der Popup-Box lautet „ElementObject.popover(options)“.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, Bootstrap-Version 5, DELL G3-Computer
Gibt es eine Popup-Ebene in Bootstrap?
Das Popup-Feld (Popover) ähnelt dem Tooltip (Tooltip), der eine erweiterte Ansicht bietet. Um das Popover zu aktivieren, bewegen Benutzer einfach den Mauszeiger über das Element. Der Inhalt der Popup-Box kann mithilfe der Bootstrap Data API vollständig gefüllt werden. Diese Methode basiert auf Tooltips.
Wenn Sie die Funktionalität dieses Plugins separat referenzieren möchten, müssen Sie auf popover.js verweisen, was vom Tooltip-Plugin abhängt. Alternativ können Sie, wie im Kapitel „Übersicht über das Bootstrap-Plugin“ erwähnt, auf bootstrap.js oder eine minimierte Version von bootstrap.min.js verweisen.
Verwendung
Das Popover-Plugin generiert Inhalte und Markups je nach Bedarf. Standardmäßig werden Popovers hinter ihren auslösenden Elementen platziert. Sie können ein Popover auf zwei Arten hinzufügen:
Über das Datenattribut: Um ein Popover hinzuzufügen, fügen Sie einfach data-toggle="popover" zu einem Anker-/Schaltflächen-Tag hinzu. Der Titel des Ankers ist der Text des Popovers. Standardmäßig platziert das Plugin das Popover oben.
<a href="#" data-toggle="popover" title="Example popover">
请悬停在我的上面
</a>Über JavaScript: Popover über JavaScript aktivieren:
$('#identifier').popover(options)
Das Popover-Plugin ist kein reines CSS-Plugin wie die zuvor besprochenen Dropdown-Menüs und anderen Plugins. Um das Plugin nutzen zu können, müssen Sie es mit jquery (Javascript lesen) aktivieren. Verwenden Sie das folgende Skript, um alle Popovers auf der Seite zu aktivieren:
$(function () { $("[data-toggle='popover']").popover(); }); Beispiel ist wie folgt:
<body>
<div class="container" style="padding: 100px 50px 10px;" >
<button type="button" class="btn btn-default" title="Popover title"
data-container="body" data-toggle="popover" data-placement="left"
data-content="左侧的 Popover 中的一些内容">
左侧的 Popover
</button>
<button type="button" class="btn btn-primary" title="Popover title"
data-container="body" data-toggle="popover" data-placement="top"
data-content="顶部的 Popover 中的一些内容">
顶部的 Popover
</button>
<button type="button" class="btn btn-success" title="Popover title"
data-container="body" data-toggle="popover" data-placement="bottom"
data-content="底部的 Popover 中的一些内容">
底部的 Popover
</button>
<button type="button" class="btn btn-warning" title="Popover title"
data-container="body" data-toggle="popover" data-placement="right"
data-content="右侧的 Popover 中的一些内容">
右侧的 Popover
</button>
</div>
<script>
$(function () {
$("[data-toggle='popover']").popover();
});
</script>
</body>
</html>Ausgabeergebnis:
Verwandte Empfehlungen: Bootstrap-Tutorial
Das obige ist der detaillierte Inhalt vonGibt es eine Popup-Ebene im Bootstrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!