讓Bootstrap的popover在鼠標移入彈窗時不消失

includecmath 發布于2019-08-19 18:03 / 2401人閱讀

摘要：后來想到可以在事件中使用來防止關閉，于是就想出了以下方法現在把鼠標移動到上時，不會隱藏了。重點對增加，讓事件等待毫秒再觸發在事件中為元素綁定鼠標事件，在事件中為觸發元素增加或刪除屬性在事件中檢查觸發元素是否存在屬性，如果存在則取消隱藏。

使用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移入鼠標樣式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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