It will probably save you a lot of time to just use something like Fancybox since extending bPopup like you are trying to do will be probably be very buggy. With Fancybox, you can simply add a rel
attribute to each of the modal links, and the $.fancybox.next()
and $.fancybox.prev()
will take you to the next/previous modal with that rel
. Another alternative is colorbox with similar functionality.
How to implement Next/Prev for modal Ajax popup
-
19-10-2022 - |
Pregunta
I'm using a bPopup jquery plugin to open ajax html files in the modal popup, but I want to extend it in order to go to the next slide in the modal without clicking out?
Here is the current code that I'm using:
$(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>
For example, if test1.html is open in the modal, and I want to go to test2.html within the open modal box without closing test1.html, and opening test2.html in another modal, is there a way to do this? I have tried adding in the open modal, but it does trigger an event.
No hay solución correcta
Otros consejos
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow