Javascript HTML页面上带有图像（黑色透明覆盖框）的jQuery弹出窗口_Javascript_Jquery_Html_Css

Javascript HTML页面上带有图像（黑色透明覆盖框）的jQuery弹出窗口

javascript jquery html css

Javascript HTML页面上带有图像（黑色透明覆盖框）的jQuery弹出窗口,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在创建一个网页，该网页将有一个jQuery弹出窗口，其中的图像将在网站加载时自动显示。我想弹出创建一个黑色透明覆盖，（链接：）。创建弹出窗口更容易。但我没能做到这一点。我希望弹出窗口显示在页面左边框的30%。当用户移动鼠标时，图像和黑色覆盖层应在悬停时消失并重新出现。我该怎么办以下是Html代码： <head> script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>

我正在创建一个网页，该网页将有一个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>

最后，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%);
        }
        }
    }

我已经修改了我用来弹出图片的代码。但显然有些地方出了问题

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

    //[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（“悬停”）

（不起作用）更改为

。on（“鼠标悬停”）

这是您可以参考的设计灵感吗？可能是现有站点？当鼠标悬停在图像上时，您似乎希望图像以黑色/透明覆盖方式弹出/突出显示。但我只是想确认一下情况是否如此……是的，我的意思是.cha弹出窗口（你可以在.css中找到它）。弹出窗口的灵感来自本教程：[链接]。我希望页面加载时弹出窗口和透明覆盖（框外）出现，鼠标悬停在上面时消失。更改后，这应该是一个单独的问题，而不是获取原始问题的答案，然后再进行更改。请看一些关于正确礼仪的元讨论，关于在给出答案后将问题改为其他问题：，。我同意@Santi。我编辑了这个问题，做了一些一般性的改进，并没有注意到在下面的答案之后有了实质性的改变。我现在已经将其回滚。请问一个新问题，或通过

@halfer

向我咨询更多指导。谢谢

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

    });

});