Maison  >  Article  >  interface Web  >  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
PHPzoriginal
2018-04-13 11:36:402581parcourir

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');     // 然后只把自己打开。
    });
  });

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!

Déclaration:
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