Question

我正在使用bPopup jquery插件在模态弹出窗口中打开ajax html文件，但是我想扩展它以便在不点击的情况下转到模态中的下一张幻灯片？

以下是我正在使用的当前代码：

$(document).ready(function() {
$('.my-button').bind('click', function(e) {//select all the buttons with a class selector

        var loadFile = $(this).data("file");

        // Prevents the default action to be triggered. 
        e.preventDefault();

        // Triggering bPopup when click event is fired
        $('#element_to_pop_up').bPopup({
            contentContainer:'.content',
            loadUrl: loadFile //Uses jQuery.load()
        });
    });
});

<button data-file="test1.html" class="my-button">Load one modal</button>
<button data-file="test2.html" class="my-button">Load another modal</button>
<button data-file="test3.html" class="my-button">Load a third modal</button>

例如，如果test1.html在模态中打开，我想在open模式框中转到test2.html而不关闭test1.html，并在另一个模态中打开test2.html，有没有办法做这个？我尝试在open模式中添加，但它确实触发了一个事件。

Answer 1

它可能会为您节省大量时间来使用 Fancybox 之类的东西，因为像您尝试的那样扩展bPopup可能会非常错误。使用Fancybox，您只需为每个模态链接添加rel属性，$.fancybox.next()和$.fancybox.prev()将带您进入下一个/上一个模式rel 。另一种选择是具有类似功能的colorbox。

如何为模态Ajax弹出窗口实现Next / Prev

1 个答案: