HTML頁面上帶有圖像（帶有黑色透明覆蓋框）的jQuery彈出窗口

Question

我正在創建一個網頁，該網頁將帶有一個jQuery彈出窗口，並且該圖像在網站加載時會自動顯示。 我希望彈出窗口創建一個黑色的透明覆蓋層，（link :) 像這樣。 創建該彈出窗口更容易。 但是我無法通過圖像執行此操作。 我希望彈出窗口出現在頁面左邊界的30％。 圖像和黑色覆蓋物在懸停時會消失，並在用戶移動鼠標時重新出現。 我該怎么辦？

這是HTML代碼：

 <head>
    script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
 </head>
 <body>
    <a class="cha" data-popup-open="popup-imonelle" href="#"></a>
    <div class="cha-popup" data-popup="popup-imonelle">
       <div class="popup-pic">
          <img src="Images/imonelle.jpg"/>
          <a class="popup-hover" data-popup-close="popup-imonelle" href="#">x</a>
       </div>
    </div>
 </body>
 <footer>
    <script src="js/Sciptquery.js"></script>
 </footer>

和jQuery：

$(function() {
    //----- OPEN when page loads
    $(function(e)  {
        var targeted_popup_class = $('[cha-popup-close]').attr('cha-popup-close');
        $('[cha-popup="' + targeted_popup_class + '"]').fadeOut(350);
    });

    //----- CLOSE on hover
    $('[cha-popup-close]').on('hover', function(e)  {
        var targeted_popup_class = jQuery(this).attr('cha-popup-close');
        $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);

        e.preventDefault();
    });
 });
 });

最后，CSS代碼：

        .cha-popup {
            width:100%;
            height:100%;
            display:none;
            position:fixed;
            top:0px;
            left:0px;
            background:rgba(0,0,0,0.75);
                       }

        /* Inner */
        .popup-pic {
            max-width:845px;
            width:90%;
            padding:0px;
            position:absolute;
            top:50%;
            left:30%;
            -webkit-transform:translate(-50%, -50%);
            transform:translate(-50%, -50%);
            box-shadow:0px 2px 6px rgba(0,0,0,1);
            border-radius:3px;
            background:#fff;
        }

        /* Close on hover function */
        .popup-hover {
            transition:ease 0.25s all;
            -webkit-transform:translate(50%, -50%);
            transform:translate(50%, -50%);
        }
        }
    }

我已經修改了用於貼在帖子上的圖像上的彈出窗口的代碼。 但是，顯然是錯誤的。

Answer 1

除了一些簡單的語法問題之外，這里的主要問題是選擇器。 讓我們來看看其中的一些...

    //[cha-popup-close]
    var targeted_popup_class = $('[cha-popup-close]').attr('cha-popup-close');

    //[cha-popup]
    $('[cha-popup="' + targeted_popup_class + '"]').fadeOut(350);

    //[data-popup]
    $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);

方括號內的選擇器（例如[cha-popup-close]正在尋找cha-popup-close的屬性 。

如果查看HTML，則沒有任何元素具有名為cha-popup或cha-popup-close的屬性，因此基本上沒有選擇器實際上在選擇任何內容。

在[data-popup]選擇是，將實際上發現了什么，因為有一個元素只有一個data-popup屬性。

使用正確的選擇器，我相信您想要的是這樣的東西：

$(document).ready(function() {

    //Get popup to open and fade it in
    var targeted_popup_class = $('[data-popup-open]').data('popup-open');
    $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);

    //CLOSE on hover
    $('[data-popup-close]').on('mouseover', function(e) {

        //Get popup to close and hide it
        var targeted_popup_class = $(this).data("popup-close");
        $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);

    });

});

這是您的示例，已修復。

除了修復選擇器之外，我還整理了一些代碼，修復了多余的花括號，最值得注意的是將.on("hover") （不起作用）更改為.on("mouseover")

HTML頁面上帶有圖像（帶有黑色透明覆蓋框）的jQuery彈出窗口

問題描述

1 個解決方案

解決方案1
0 2017-01-30 22:29:01

HTML頁面上帶有圖像（帶有黑色透明覆蓋框）的jQuery彈出窗口

問題描述

1 個解決方案

解決方案1 0 2017-01-30 22:29:01

解決方案1
0 2017-01-30 22:29:01