Question

我对jquery和stackoverflow都很新。

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

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

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

您可以使用多个占位符，如果您搜索过，我会在这里找到关于什么是最佳选择的大量讨论。大多数人只是使用＆＃34;＃＆＃34;但请注意，它会自动滚动到页面顶部。

不要忘记在关闭按钮中添加相同的监听器：

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

Jquery Lightbox没有显示

1 个答案: