Heim >Web-Frontend >Bootstrap-Tutorial >So schließen Sie das Popup-Fenster im Bootstrap

So schließen Sie das Popup-Fenster im Bootstrap

藏色散人
藏色散人Original
2021-02-05 09:08:022808Durchsuche

So schließen Sie das Popup-Feld im Bootstrap: Fügen Sie zuerst „data-toggle="popover"“ zum Element hinzu, um das Popup-Feld zu erstellen, und verwenden Sie dann zum Festlegen das Attribut „data-trigger="focus". Klicken Sie mit der Maus außerhalb des Elements, um das Popup-Fenster zu schließen. Rahmen Sie es einfach ein.

So schließen Sie das Popup-Fenster im Bootstrap

Die Betriebsumgebung dieses Artikels: Windows 7-System, Bootstrap3, Dell G3-Computer.

Bootstrap-Popover

Erstellen Sie ein Popover, indem Sie data-toggle="popover" zum Element hinzufügen. Der Inhalt des Attributs

  • title ist der Titel des Popup-Felds.

  • data-content-Attribut zeigt den Textinhalt des Popup-Felds an.

  • Standardmäßig wird das Popover auf der rechten Seite des Elements angezeigt. Mit dem data-placement-Attribut können Sie die Richtung der Popup-Box-Anzeige festlegen: oben: unten, links: links oder rechts: rechts.

Wie schließe ich das Popup-Fenster im Bootstrap?

Standardmäßig wird das Popup-Fenster geschlossen, nachdem Sie erneut auf das angegebene Element geklickt haben. Mit dem Attribut data-trigger="focus" können Sie festlegen, dass das Popup-Fenster geschlossen wird, wenn die Maus außerhalb des Elements klickt.

Um den Effekt „Klicken und das Popup-Fenster verschwinden lassen“ zu erreichen, ist zusätzlicher Code erforderlich.

Für bessere browser- und plattformübergreifende Effekte müssen Sie das Tag verwenden, nicht das Tag

Empfehlung: „Bootstrap-Tutorial

Beispiel:

<a tabindex="0" href="#" role="button" title="取消弹出框" data-toggle="popover" data-trigger="focus" data-content="点击文档的其他地方关闭我">
点我
</a>

So schließen Sie das Popup-Fenster im Bootstrap

Wenn Sie den Effekt erzielen möchten, dass die Maus angezeigt wird, wenn sie sich zum Element bewegt, und nach dem Entfernen verschwindet, können Sie das Attribut data-trigger verwenden und setze den Wert auf „hover“:

<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="一些内容">
鼠标移动到我这
</a>

So schließen Sie das Popup-Fenster im Bootstrap

Das obige ist der detaillierte Inhalt vonSo schließen Sie das Popup-Fenster im Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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