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

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

Recommandations associées :

Info-bulle d'analyse du code source BOOtstrap, popover_html/css_WEB-ITnose

Bootstrap doit apprendre pop- up box tous les jours (Popover) Compétences Plug-in_javascript

La boîte contextuelle de BootStrap (Popover) prend en charge le déplacement de la souris sur la couche contextuelle Raisons et solutions pour la fenêtre contextuelle. la couche de fenêtre n'est pas cachée_compétences javascript

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!