Jquery 灯箱未显示

Question

我对 jquery 和 Whosebug 都很陌生。

我正在尝试自己创建一个灯箱。我已成功使用 jquery 添加灯箱结构，如下所示......

var patch= $(
        '<div id="Adi-patch" style="position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); text-align: center; color: white;"></div>');
    $("#wrapper").before(patch);
    patch.html(
        '<span id="Adi-close-btn" style="position: absolute; right: 1em; font-size: 2em; color: white; cursor: pointer;">&#9587;</span>\
        <div id="Adi-content" style="background: gray; position: relative; left: 50%; margin-left: -25%; width: 50%; height: 90%; overflow: hidden;"></div>\
        <div id="Adi-prev-btn" style="background: black; position: absolute; top: 50%; font-size: 2em; margin-top: -1em; padding: 5px; cursor: pointer;">&#10094;</div>\
        <div id="Adi-next-btn" style="background: black; position: absolute; top: 50%; right: 0px; font-size: 2em; margin-top: -1em; padding: 5px; cursor: pointer;">&#10095;</div>\
        <div id="Adi-caption" style="padding: 5px;">Sample caption</div>'
    );
    patch.css({"display": "none"});

但是后来我卡在了显示点击事件的内容上。我试过了....

<!-- Show Lightbox structure on anchor click event   -->
    $('#wrapper a').click(function(){
        patch.fadeToggle();
    });

问题是结构只是闪烁并消失了。它不会留在那里。请建议我应该怎么做才能解决这个问题。或者，如果已经讨论过，请告诉我解决方案。

提前致谢。

Answer 1

发生错误是因为您的超链接留空，重定向到同一页面。

您可以使用多个占位符，如果您进行搜索，您会发现这里有很多关于什么是最佳选择的讨论。大多数人只使用“#”，但请注意它会自动将您滚动到页面顶部。

不要忘记将相同的侦听器添加到关闭按钮：

$('#wrapper a, #Adi-close-btn').click(function() {
  patch.fadeToggle();
});

Jquery 灯箱未显示

Jquery Lightbox not showing

jquery

lightbox