让Bootstrap的popover在鼠标移入弹窗时不消失

includecmath 发布于2019-08-19 18:03 / 2400人阅读

摘要：后来想到可以在事件中使用来防止关闭，于是就想出了以下方法现在把鼠标移动到上时，不会隐藏了。重点对增加，让事件等待毫秒再触发在事件中为元素绑定鼠标事件，在事件中为触发元素增加或删除属性在事件中检查触发元素是否存在属性，如果存在则取消隐藏。

使用bootstrap的popover，trigger设置为hover时，可以实现当鼠标放置到目标元素上时显示popover，可是无法实现当鼠标移动到popover上时不隐藏popover，在网上找了下只找到一篇文章（链接），不好的是需要修改bootstrap的源代码，这不是我想要的，只好另寻它路。
后来想到可以在hide.bs.popover事件中使用event.preventDefault()来防止popover关闭，于是就想出了以下方法：

$(".hoverPopover").popover({
        template: "
",
        html: true,
        trigger: "hover",
        placement: "top",
        delay: {hide: 100}
    }).on("shown.bs.popover", function (event) {
        var that = this;
        $(this).parent().find("div.popover").on("mouseenter", function () {
            $(that).attr("in", true);
        }).on("mouseleave", function () {
            $(that).removeAttr("in");
            $(that).popover("hide");
        });
    }).on("hide.bs.popover", function (event) {
        if ($(this).attr("in")) {
            event.preventDefault();
        }
    });

现在把鼠标移动到popover上时，popover不会隐藏了。
重点：

对popover增加 delay: {hide: 100}，让hide事件等待100毫秒再触发；

在shown.bs.popover事件中为popover元素绑定鼠标事件，在事件中为popover触发元素增加或删除“in”属性；

在hide.bs.popover事件中检查触发元素是否存在“in”属性，如果存在则取消隐藏。

云服务器 GPU云服务器弹窗时不 bootstrap的popover 弹窗时 js移入鼠标样式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79129.html

小程序显示弹窗时禁止下层的内容滚动

摘要：小程序显示弹窗时禁止下层的内容滚动小程序显示弹窗时禁止下层的内容滚动第一种方式利用禁止页面滚动一页面结构此处为整个页面的结构内容点击显示弹窗当为的时候显示弹窗此处为弹窗内容二部分添加一个类名把弹窗的下层内容定位为实现禁小程序显示弹窗时禁止下层的内容滚动小程序显示弹窗时禁止下层的内容滚动 ① 第一种方式利用position:fixed. 禁止页面滚动. 一. 页面结构html ...

snifes 2019-08-23 16:07 评论0 收藏0
小程序显示弹窗时禁止下层的内容滚动

摘要：小程序显示弹窗时禁止下层的内容滚动小程序显示弹窗时禁止下层的内容滚动第一种方式利用禁止页面滚动一页面结构此处为整个页面的结构内容点击显示弹窗当为的时候显示弹窗此处为弹窗内容二部分添加一个类名把弹窗的下层内容定位为实现禁小程序显示弹窗时禁止下层的内容滚动小程序显示弹窗时禁止下层的内容滚动 ① 第一种方式利用position:fixed. 禁止页面滚动. 一. 页面结构html ...

ddongjian0000 2019-08-30 15:56 评论0 收藏0
CSS transition delay简介与进阶应用

摘要：用来定义元素两种状态之间的过渡。到目前为止，我们利用完全模拟了第一部分我们使用实现的功能，而且看上去更简洁。附上利用来实现该方案的代码用于参考。由于代码效果时好时坏，猜测可能与的容器相关。背景在日常的项目开发中，我们会很经常的遇见如下的需求：在浏览器页面中，当鼠标移动到某个部分后，另一个部分在延迟若干时间后出现在鼠标移除该区域后，另一部分也在延迟若干时间后消失我相信这是一...

e10101 2019-08-30 12:54 评论0 收藏0
跳出弹窗页面禁止滚动（PC端和手机端）

摘要：端如何实现当弹窗显示时，为元素添加属性当关闭弹窗时移除该属性即可在弹窗的上设置你要显示的内容出现弹窗时，为元素添加，这样主页面就禁止滑动，同时很好地解决了弹窗穿透的问题。由于无法取消，因此事件监听器无法阻止页面呈现。 pc端如何实现 1.当弹窗显示时，为body元素添加属性：overflow：hidden, 当关闭弹窗时移除该属性即可2.在弹窗的div上设置 @scroll.sto...

HmyBmny 2019-08-23 13:49 评论0 收藏0