Question

我正在构建一个wordpress网站，它具有特定按钮的模态覆盖。

我有以下代码用于模态

HTML

<div class="lightbox" id="send-contact-det">
(Content here)
</div>

的Javascript

jQuery('.open-lightbox').click(function() {
  var link = jQuery(this).attr('href');
  jQuery('.overlay').fadeIn();
  jQuery(link).fadeIn();
  return false;
})

jQuery('.lightbox .close, .overlay').click(function() {
  jQuery('.overlay').fadeOut();
  jQuery('.lightbox').fadeOut();
})
jQuery('.lightbox').each(function() {
  var lW = $(this).outerWidth();
  var mrgL = lW / 2;
  var lH = $(this).outerHeight();
  var mrgT = lH / 2;
  jQuery(this).css({'margin-left': -mrgL, 'margin-top': -mrgT})
})

现在这在我的所有页面上都能完美运行，除了在搜索页面上 - 内容是动态加载的。

我已经尝试过.live（）和.on（）函数，但是徒劳无功。已经在这几个小时了。

非常感谢任何帮助。

Answer 1

我使用以下解决方法修复了它。它现在正在运作。

如果有人有更好的方法，请告诉我。

$(document).on('click', '.open-lightbox', function()
{
        var link = jQuery(this).attr('href');
        jQuery('.overlay').fadeIn();
        jQuery(link).fadeIn();
        return false;
});

    $(' .lightbox .close, .overlay').click(function() {
        jQuery('.overlay').fadeOut();
        jQuery('.lightbox').fadeOut();
    })
   $('.lightbox').each(function() {
        var lW = jQuery(this).outerWidth();
        var mrgL = lW / 2;
        var lH = jQuery(this).outerHeight();
        var mrgT = lH / 2;
        jQuery(this).css({'margin-left': -mrgL, 'margin-top': -mrgT})
    })

修正了它的完美！：）

在动态内容上加载Bootstrap灯箱

1 个答案: