Fancybox 2:当通过click()方法(Jquery)调用弹出窗口时，覆盖层消失了

Question

我想问一个关于打开一个花哨的盒子弹出窗口的问题，我想从 JQuery 调用它，我想自动显示它，所以，这就是我在 Jquery 中所做的：

document.getElementById('link-fancybox-popup').click();

我只是在模拟打开它的链接（<a>）中的单击。它可以工作，但花哨的框覆盖（弹出窗口后面的黑色背景）消失，弹出窗口在没有该叠加层的情况下显示。

这很奇怪，因为如果我删除我写的那句话，当我手动单击弹出窗口时，它会完美运行，并且也会显示叠加层。

有人有过这种行为吗？谢谢。

Answer 1

通常我不使用任何弹出窗口插件，您可以使用以下脚本来使用覆盖。

$(function(){
    $('.clickme').click(function(){
        $('.popup,.mask').fadeIn();
    });
    $('.mask').click(function(){
        $('.popup,.mask').fadeOut();
    });
});

.clickme{
    display:inline-block;
    cursor:pointer;
    padding:10px;
    background:#00cfff;
    color:#fff;
}
.mask{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.4);
    z-index:2;
    display:none;
}
.popup{
    display:none;
    position:fixed;
    top:20px;
    left:20px;
    width:100px;
    height:100px;
    background:#d30043;
    z-index:3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class='outer'>
    <span class='clickme'>Click Me</span>
    <div class='mask'></div>
    <div class='popup'>I am a Popup</div>
</div>

Answer 2

试试这个

.HTML

<p>To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
        <div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
        <div id="fade" class="black_overlay"></div>

.CSS

.black_overlay{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index:1001;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=80);
        }
        .white_content {
            display: none;
            position: absolute;
            top: 25%;
            left: 25%;
            width: 50%;
            height: 50%;
            padding: 16px;
            border: 16px solid orange;
            background-color: white;
            z-index:1002;
            overflow: auto;
        }

在这里演示