Comment configurer une boîte contextuelle dans bootstrap4-Tutoriel d'amorçage-php.cn

Maison

interface Web

Comment configurer une boîte contextuelle dans bootstrap4

Jul 12, 2019 am 10:14 AM

Le contrôle de la boîte contextuelle est similaire à une boîte d'invite. Il s'affiche après que la souris clique sur un élément. La différence avec la boîte d'invite est qu'elle peut afficher plus de contenu.

Comment configurer une boîte contextuelle dans bootstrap4

Comment créer une boîte popup (apprentissage recommandé : Tutoriel vidéo Bootstrap)

En ajoutant data-toggle="popover" à l'élément pour créer un popover.

Le contenu de l'attribut title est le titre de la boîte contextuelle, et l'attribut data-content affiche le contenu textuel de la boîte contextuelle :

&lt;a href=&quot;#&quot; data-toggle=&quot;popover&quot; title=&quot;弹出框标题&quot; data-content=&quot;弹出框内容&quot;&gt;多次点我&lt;/a&gt;

Copier après la connexion

Remarque : la pop La boîte -up doit être écrite dans le code d'initialisation jQuery : spécifiez ensuite Appelez la méthode popover() sur l'élément.

data-placement = {left | top right | bottom | auto} définit la position d'affichage de la boîte contextuelle et prend en charge plusieurs paramètres. ", la fenêtre pop-up sera. Elle peut être affichée à gauche, mais elle sera affichée à droite si la situation ne le permet pas.

Les exemples suivants peuvent utiliser pop-ups n'importe où dans le document :

$(document).ready(function(){
    $('[data-toggle="popover"]').popover(); 
});

Copier après la connexion

Code complet :

Par défaut, la boîte de dialogue contextuelle se fermera après avoir cliqué à nouveau sur l'élément spécifié. Vous pouvez utiliser l'attribut data-trigger="focus" pour le définir lorsque la souris clique en dehors de la zone de l'élément pour fermer la fenêtre contextuelle.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Bootstrap 实例&lt;/title&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css&quot;&gt;
  &lt;script src=&quot;https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class=&quot;container&quot;&gt;
  &lt;h3&gt;弹出框实例&lt;/h3&gt; &lt;br&gt;
  &lt;a href=&quot;#&quot; title=&quot;取消弹出框&quot; data-toggle=&quot;popover&quot; data-trigger=&quot;focus&quot; data-content=&quot;点击文档的其他地方关闭我&quot;&gt;点我&lt;/a&gt;
&lt;/div&gt;

&lt;script&gt;
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();   
});
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

Pour des articles plus techniques liés à Bootstrap, veuillez visiter la colonne Tutoriel Bootstrap pour apprendre !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn