Le popover personnalisé BootStrap implémente la fonction de masquage de la zone de clic-js tutoriel-php.cn

Le popover personnalisé BootStrap implémente la fonction de masquage de la zone de clic

小云云

Libérer： 2018-01-24 09:34:26

original

2491 Les gens l'ont consulté

Cet article partage principalement avec vous un article sur la façon d'implémenter la fonction de popover personnalisé et de masquage de zone de clic de BootStrap. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Lors de l'utilisation de bootstrap, il est souvent nécessaire d'ajouter un bouton d'aide quelque part. Lorsque vous cliquez dessus ou que vous passez la souris, des informations d'aide seront demandées. Cependant, il semble qu'aucune méthode ne soit fournie par bt. . Si quelqu'un connaît le bootstrap, vous pouvez laisser un message dans la zone de commentaires.

Le code est le suivant

Le bouton avant doit être défini comme pop

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