Home > Article > Web Front-end > BootStrap custom popover implements click area hiding function
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
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!