jQuery弹出窗口，带有HTML页面上的图像(带有黑色透明覆盖的框)

我正在创建一个网页，该网页将有一个jQuery弹出窗口，其中包含一个图像，该图像将在网站加载时自动出现。我希望弹出窗口创建一个黑色透明覆盖，（链接：）喜欢这个。创建该弹出窗口更容易。但我无法对图像执行此操作。我希望弹出窗口从页面左边框显示 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%);
        }
        }
    }

我已经修改了用于附加到帖子的图像上的弹出窗口的代码。但显然有些不对劲。

除了一些简单的语法问题外，这里的主要问题是您的选择器。让我们来看看其中的一些...

    //[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")

相关内容

最新更新

热门标签：