So schließen Sie das Popup-Fenster im Bootstrap

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.

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 , und , müssen außerdem die Attribute „role="button"“ und „tabindex“ enthalten.

Empfehlung: „Bootstrap-Tutorial“

Beispiel:

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

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>

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!