Gibt es eine Popup-Ebene im Bootstrap?-Front-End-Fragen und Antworten-php.cn

Gibt es eine Popup-Ebene im Bootstrap?

WBOY

Freigeben： 2022-06-16 15:57:00

Original

1884 Leute haben es durchsucht

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)“.

Gibt es eine Popup-Ebene im Bootstrap?

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>

Nach dem Login kopieren

Über JavaScript: Popover über JavaScript aktivieren:

$(&#39;#identifier&#39;).popover(options)

Nach dem Login kopieren

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=&#39;popover&#39;]").popover(); });

Nach dem Login kopieren

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=&#39;popover&#39;]").popover();
});
</script>
</body>
</html>

Nach dem Login kopieren

Ausgabeergebnis:

Gibt es eine Popup-Ebene im Bootstrap?

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!