JQuery Лайтбокс не показан

Question

Я очень новичок в jquery, а также в stackoverflow.

Я пытаюсь создать лайтбокс самостоятельно. Я в добавлении преуспел структуры лайтбокса с помощью 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(); 
});