Question

我正在创建一个网页，该网页将包含一个jQuery弹出窗口，其中包含一个在网站加载时会自动显示的图像。我希望弹出窗口创建一个黑色透明叠加层，（链接:) like this。创建弹出窗口更容易。但我没有用图像做到这一点。我希望弹出窗口从页面的左边框显示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);

    });

});

Here's your example, fixed.

除了修理你的选择器之外，我已经整理了你的代码，修复了你所放置的额外大括号，最显着的是将你的.on("hover")（不起作用）改为{ {1}}

HTML页面

1 个答案: