Maison > interface Web > js tutoriel > BootStrap implémente la fonction de masquage de la zone de clic

BootStrap implémente la fonction de masquage de la zone de clic

PHPz
Libérer: 2018-10-13 15:24:02
original
2600 Les gens l'ont consulté

Cette fois, je vais vous présenter BootStrap pour implémenter la fonction de masquage de la zone de clic. Quelles sont les précautions à prendre pour que BootStrap implémente la fonction de masquage de la zone de clic ?

Lorsque vous utilisez bootstrap, vous devez souvent ajouter un bouton d'aide quelque part. Lorsque vous cliquez ou survolez la souris, un message d'aide s'affiche. Cependant, il semble qu'aucune méthode ne soit fournie par bt. le maître connaît le bootstrap Si vous en avez, vous pouvez laisser un message, j'en ai appris : Le code est le suivant

Le bouton précédent doit être défini comme pop ;

$(function(){
    $(".pop").popover({placement:'right', trigger:'manual', delay: {show: 10, hide: 10}, html: true,
      title: function () {
        return $("#src-title").html();
      },
      content: function () {
       return $("#data-content").html(); // 把content变成html
      }});
    $('body').click(function (event) {
      var target = $(event.target);    // 判断自己当前点击的内容
      if (!target.hasClass('popover')
          && !target.hasClass('pop')
          && !target.hasClass('popover-content')
          && !target.hasClass('popover-title')
          && !target.hasClass('arrow')) {
        $('.pop').popover('hide');   // 当点击body的非弹出框相关的内容的时候,关闭所有popover
      }
    });
    $(".pop").click(function (event) {
      $('.pop').popover('hide');     // 当点击一个按钮的时候把其他的所有内容先关闭。
      $(this).popover('toggle');     // 然后只把自己打开。
    });
  });
Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez faire attention au Bootstrap. tuto!

Lecture recommandée :

Explication détaillée des étapes pour obtenir un effet de défilement transparent avec vue.js

Créé avec D3 .js Explication détaillée des étapes de la carte logistique

Quelles sont les normes de codage JS

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!

Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal