BootStrap カスタムポップオーバーはクリック領域の非表示機能を実装します-jsチュートリアル-php.cn

BootStrap カスタムポップオーバーはクリック領域の非表示機能を実装します

小云云

リリース： 2018-01-24 09:34:26

オリジナル

2297 人が閲覧しました

この記事は主に、BootStrap のカスタムポップオーバーとクリック領域の非表示機能の実装方法に関する記事を共有するものであり、非常に参考になるものです。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

ブートストラップを使用する場合、どこかにヘルプボタンを追加する必要があることがよくありますが、クリックしたりマウスを移動したりすると、ヘルプメッセージが表示されます。ブートストラップに詳しい専門家であれば、コメント欄にメッセージを残してください。

コードは次のとおりです

前のボタンは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;);     // 然后只把自己打开。
    });
  });

ログイン後にコピー