成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

讓Bootstrap的popover在鼠標(biāo)移入彈窗時(shí)不消失

includecmath / 2492人閱讀

摘要：后來想到可以在事件中使用來防止關(guān)閉，于是就想出了以下方法現(xiàn)在把鼠標(biāo)移動(dòng)到上時(shí)，不會(huì)隱藏了。重點(diǎn)對(duì)增加，讓事件等待毫秒再觸發(fā)在事件中為元素綁定鼠標(biāo)事件，在事件中為觸發(fā)元素增加或刪除屬性在事件中檢查觸發(fā)元素是否存在屬性，如果存在則取消隱藏。

使用bootstrap的popover，trigger設(shè)置為hover時(shí)，可以實(shí)現(xiàn)當(dāng)鼠標(biāo)放置到目標(biāo)元素上時(shí)顯示popover，可是無法實(shí)現(xiàn)當(dāng)鼠標(biāo)移動(dòng)到popover上時(shí)不隱藏popover，在網(wǎng)上找了下只找到一篇文章（鏈接），不好的是需要修改bootstrap的源代碼，這不是我想要的，只好另尋它路。
后來想到可以在hide.bs.popover事件中使用event.preventDefault()來防止popover關(guān)閉，于是就想出了以下方法：

$(".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();
        }
    });

現(xiàn)在把鼠標(biāo)移動(dòng)到popover上時(shí)，popover不會(huì)隱藏了。
重點(diǎn)：

對(duì)popover增加 delay: {hide: 100}，讓hide事件等待100毫秒再觸發(fā)；

在shown.bs.popover事件中為popover元素綁定鼠標(biāo)事件，在事件中為popover觸發(fā)元素增加或刪除“in”屬性；

在hide.bs.popover事件中檢查觸發(fā)元素是否存在“in”屬性，如果存在則取消隱藏。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://hztianpu.com/yun/79129.html

相關(guān)文章

  • 小程序顯示彈窗時(shí)禁止下層的內(nèi)容滾動(dòng)

    摘要：小程序顯示彈窗時(shí)禁止下層的內(nèi)容滾動(dòng)小程序顯示彈窗時(shí)禁止下層的內(nèi)容滾動(dòng)第一種方式利用禁止頁面滾動(dòng)一頁面結(jié)構(gòu)此處為整個(gè)頁面的結(jié)構(gòu)內(nèi)容點(diǎn)擊顯示彈窗當(dāng)為的時(shí)候顯示彈窗此處為彈窗內(nèi)容二部分添加一個(gè)類名把彈窗的下層內(nèi)容定位為實(shí)現(xiàn)禁 小程序顯示彈窗時(shí)禁止下層的內(nèi)容滾動(dòng) 小程序顯示彈窗時(shí)禁止下層的內(nèi)容滾動(dòng) ① 第一種方式利用position:fixed. 禁止頁面滾動(dòng). 一. 頁面結(jié)構(gòu)html ...

    snifes 評(píng)論0 收藏0

  • 小程序顯示彈窗時(shí)禁止下層的內(nèi)容滾動(dòng)

    摘要：小程序顯示彈窗時(shí)禁止下層的內(nèi)容滾動(dòng)小程序顯示彈窗時(shí)禁止下層的內(nèi)容滾動(dòng)第一種方式利用禁止頁面滾動(dòng)一頁面結(jié)構(gòu)此處為整個(gè)頁面的結(jié)構(gòu)內(nèi)容點(diǎn)擊顯示彈窗當(dāng)為的時(shí)候顯示彈窗此處為彈窗內(nèi)容二部分添加一個(gè)類名把彈窗的下層內(nèi)容定位為實(shí)現(xiàn)禁 小程序顯示彈窗時(shí)禁止下層的內(nèi)容滾動(dòng) 小程序顯示彈窗時(shí)禁止下層的內(nèi)容滾動(dòng) ① 第一種方式利用position:fixed. 禁止頁面滾動(dòng). 一. 頁面結(jié)構(gòu)html ...

    ddongjian0000 評(píng)論0 收藏0

  • CSS transition delay簡(jiǎn)介與進(jìn)階應(yīng)用

    摘要：用來定義元素兩種狀態(tài)之間的過渡。到目前為止，我們利用完全模擬了第一部分我們使用實(shí)現(xiàn)的功能，而且看上去更簡(jiǎn)潔。附上利用來實(shí)現(xiàn)該方案的代碼用于參考。由于代碼效果時(shí)好時(shí)壞，猜測(cè)可能與的容器相關(guān)。 背景 在日常的項(xiàng)目開發(fā)中，我們會(huì)很經(jīng)常的遇見如下的需求： 在瀏覽器頁面中，當(dāng)鼠標(biāo)移動(dòng)到某個(gè)部分后，另一個(gè)部分在延遲若干時(shí)間后出現(xiàn) 在鼠標(biāo)移除該區(qū)域后，另一部分也在延遲若干時(shí)間后消失 我相信這是一...

    e10101 評(píng)論0 收藏0

  • 跳出彈窗頁面禁止?jié)L動(dòng)（PC端和手機(jī)端）

    摘要：端如何實(shí)現(xiàn)當(dāng)彈窗顯示時(shí)，為元素添加屬性當(dāng)關(guān)閉彈窗時(shí)移除該屬性即可在彈窗的上設(shè)置你要顯示的內(nèi)容出現(xiàn)彈窗時(shí)，為元素添加，這樣主頁面就禁止滑動(dòng)，同時(shí)很好地解決了彈窗穿透的問題。由于無法取消，因此事件監(jiān)聽器無法阻止頁面呈現(xiàn)。 pc端如何實(shí)現(xiàn) 1.當(dāng)彈窗顯示時(shí)，為body元素添加屬性：overflow：hidden, 當(dāng)關(guān)閉彈窗時(shí)移除該屬性即可2.在彈窗的div上設(shè)置 @scroll.sto...

    HmyBmny 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<