Ajoutez une petite superposition au contenu de la page, tout comme les effets sur l'iPad, en ajoutant des informations supplémentaires aux éléments de la page.
Dépendances du plugin
La boîte contextuelle dépend du plugin d'info-bulle, de sorte que le plugin d'info-bulle doit être chargé en premier.
Fonction d'addition sélective
Pour les considérations de performances, l'API d'attribut de données des info-bulleurs et des composants contextuels est éventuellement ajouté, ce qui signifie que vous devez les initialiser vous-même.
Des paramètres supplémentaires sont nécessaires lorsque des boîtes contextuelles sont utilisées dans les groupes de bouton et les groupes de boîtes d'entrée
Lorsque la boîte d'invite est utilisée en conjonction avec le groupe .btn ou le groupe .input, vous devez spécifier l'option Container: «Body» (voir la documentation ci-dessous) pour éviter les effets secondaires indésirables (par exemple, lorsque la boîte pop-up apparaît, les éléments de la page qui coopèrent avec lui peuvent devenir plus larges ou liés).
Lorsque vous utilisez des boîtes contextuelles sur des éléments de page interdits, vous devez ajouter un élément supplémentaire pour l'envelopper
Afin d'ajouter une boîte contextuelle à un élément désactivé ou.
1. Cas statiques
4 Options facultatives: arrangement supérieur, droit, inférieur et gauche.
Segment de code
.BS-Example {Border-Color: #dd; Border-Radius: 4px 4px 0 0; largeur de bordure: 1px; Box-shadow: aucun; marge-gauche: 0; marge-droite: 0; Style de la frontière: solide; } .BS-Example-popover .popover {position: relative; Affichage: bloc; flottant: à gauche; Largeur: 240px; marge: 20px; }<h1> 3. Popup Box </h1> <div> <div> <div> </div> <h3> Popover Top </H3> <v> <p> SED POSUERE CONSECTETUR est à Lobortis. Aenean Eu Leo Quam. Pellentesque Ornare Sem Lacinia Quam Vénénatis vestibulum. </p> </div> </div> <div> <div> </div> <h3> Popover à droite </h3> <div> <p> Sed Posuère Consectetur est à Loborttis. Aenean Eu Leo Quam. Pellentesque Ornare Sem Lacinia Quam Venénatis. </p> </div> <div> <div> </div> <h3> Popover à droite </h3> <div> <p> SED POSUERE CONCECTEUR est à Lobortis. Aenean Eu Leo Quam. Pellentesque Ornare Sem Lacinia Quam Vénénatis vestibulum. </p> </div> </div> <div> <div> </div> <h3> Popover Bottom </h3> <div> <p> Sed Posuère Consectetur est à Lobortis. Aenean Eu Leo Quam. Pellentesque Ornare Sem Lacinia Quam Vénénatis vestibulum. </p> </div> </div> <div> <div> </div> <h3> Popover Left </h3> <div> <p> Sed Posuère Consectetur est à Lobortis. Aenean Eu Leo Quam. Pellentesque Ornare Sem Lacinia Quam Venénatis vestibulum. </p> </div> </div> </div> </div> </div>
Effet de prévisualisation
Extrait de code:
<a href = "JavaScript: void (0)" id = "a_pop" data-place = "inférieur" data-content = "Le vent et la pluie sont comme passer du temps à rattraper le cheval blanc. Vous tiendez toujours le rêve dans votre jeune palmier. sont déviés du monde entier, le vent et égayent les flocons de neige qui blancs sont des cheveux. Vous avez dit une fois que vous ne devriez pas vous séparer et être ensemble pour toujours, et maintenant je veux vous demander si vous êtes juste un dicton enfantin, les années innocentes ne peuvent pas supporter de tromper les jeunes. Je serai à la hauteur de vous. La neige lourde s'il vous plaît n'effacez pas les traces de notre être ensemble. La neige lourde ne peut pas effacer les marques que nous nous donnons. Ce soir, l'herbe est séparée et la soirée lunaire brillante vous enverra des milliers de kilomètres pour attendre que le vent d'automne arrive.
<strong> js initialisation: </strong> <script type = "text / javascript"> $ ("# a_pop"). popover (); </cript>Effet d'aperçu:
Notez que lorsqu'un placement est spécifié, accordez une attention particulière aux problèmes de direction. Parce que la boîte contextuelle commence à apparaître avec le centre de l'élément d'événement Trigger, il est probablement écrasé et ne peut pas les afficher tous.
L'attribut A TAG HREF dans le code doit être spécifié en tant que JavaScript: void (0) pour supprimer l'effet de liaison.
Quatre directions:
Code
<a href = "JavaScript: void (0)" id = "a_pop1" data-place = "Left" data-contrac = "Le vent et la pluie sont comme passer du temps pour rattraper le cheval blanc. Tenez-vous toujours votre sommeil dans votre jeune palmier? <a href = "JavaScript: void (0)" id = "a_pop2" data-plaplacement = "top" data-content = "Nous avons dit que nous ne devrions pas nous séparer et nous devons toujours être ensemble, même si nous sommes des ennemis avec le temps, même si nous parlons du monde entier, le vent et les flocons de neige qui se soufflaient des cheveux. Vous nous souvenons que nous disions du monde ensemble?" Data-Original-Title = "Time to Balan Rain"> Upper </a> <a href = "JavaScript: void (0)" id = "A_POP3" Data-Placement = "Bottom" Data-Content = "Les souhaits infinis faits dans le milieu de l'été que nous devons toujours être ensemble sans séparation. Paroles de l'enfant. " Data-Original-Title = "Time to Bail Rain"> inférieur </a> <a href = "JavaScript: void (0)" id = "A_POP4" Data-Placement = "Right" Data-Content = "Les années innocentes ne peuvent pas faire de la jeunesse. Autre. $ ("# a_pop2"). popover (); $ ("# a_pop3"). popover (); $ ("# a_pop4"). popover (); </cript>Effets d'aperçu;
2. Options
Les options peuvent être transmises à travers les propriétés de données ou JavaScript. Pour l'attribut de données, vous devez mettre le nom d'option après les données - par exemple data-animation = "".
Appliquer les propriétés de données à une seule boîte contextuelle
Pour une seule boîte contextuelle, vous pouvez spécifier des options séparément via la propriété Data, comme indiqué ci-dessus.
3. Méthode
$ (). Popover (Options)
Initialise la boîte contextuelle pour un ensemble d'éléments.
.popover ('show')
Montre la boîte contextuelle.
$ ('# élément'). Popover ('show')
.popover ('hide')
Cachez la boîte contextuelle.
$ ('# élément'). Popover ('Hide')
.popover ('toggle')
Afficher ou masquer la boîte contextuelle.
$ ('# élément'). Popover ('toggle')
.popover ('détruire')
Cachez et détruisez la boîte pop-up.
$ ('# élément'). Popover ('détruire')
Iv. Événements
$ ('# mypopover'). sur ('Hidden.bs.popover', fonction () {// faire quelque chose…})Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Ce qui précède concerne cet article. J'espère qu'il sera utile pour tout le monde d'apprendre et de maîtriser la boîte pop-up bootstrap.