Home  >  Article  >  Web Front-end  >  BootStrap custom popover implements click area hiding function

BootStrap custom popover implements click area hiding function

小云云
小云云Original
2018-01-24 09:34:262304browse

This article mainly shares with you an article on how to implement BootStrap custom popover and click area hiding function. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor to take a look, I hope it can help everyone.

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 anyone has If you know about bootstrap, you can leave a message in the comment area.

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

Related recommendations:

BOOtstrap source code analysis tooltip, popover_html/css_WEB-ITnose

Bootstrap pop-up box (Popover) plug-in that must be learned every day _javascript skills

BootStrap’s pop-up box (Popover) supports moving the mouse over the pop-up layer. Reasons and solutions for the pop-up window layer not being hidden_javascript skills

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn