BootStrap implements click area hiding function

This time I will bring you BootStrap to implement the click area hiding function. What are the precautions for BootStrap to implement the click area hiding function? The following is a practical case, let's take a look.

When using bootstrap, it is often necessary to add a help button somewhere. When clicked or the mouse is hovered, a help message will be prompted. However, it seems that there is no method provided by bt. If any master knows about bootstrap Some of you can leave a message, I learned from it: The code is as follows

The previous button must be defined as 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');     // 然后只把自己打开。
    });
  });

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to Bootstrap tutorial!

Recommended reading:

Detailed explanation of the steps to achieve seamless scrolling effect with vue.js

Created using D3.js Detailed explanation of the steps of logistics map

What are the JS coding standards

The above is the detailed content of BootStrap implements click area hiding function. For more information, please follow other related articles on the PHP Chinese website!