i got the following problem, i would like to create a counter function to switch between modals so i can re-use the function on multiple pages, i'm fighting my way trough the internet but can't find the solution, i tried multiple options, but it only switched trough the first 2 modals, also when i check the log, my counter variable don't get past 1 (first click).
i started with this
var counter = 0;
var step = 1;
var prev = 0;
$( document ).ready(function() {
$('.button-'+counter).click(function() {
counter++;
prev = counter - step;
$('.window-'+prev).modal('hide');
$('.window-'+counter).modal('show');
console.debug(counter, prev);
});
//$('.modal-header > .close').click(function() {
// counter = 0;
//});
});
then after some research i ended up with this, but it does exactly the same thing
var counter = 0;
var step = 1;
var prev = 0;
$( document ).ready(function() {
$('#addproductnext').each(function() {
$(this).on('click', function() {
counter++;
prev = counter - step;
console.log(counter, prev);
if($('#addproductwindow').hasClass('window-'+prev)) {
$('.window-'+prev).modal('hide');
$('.window-'+counter).modal('show');
};
});
});
This is my quick fix for now, but i dont think it's neat
$( document ).ready(function() {
$('.button-0').click(function() {
$('.window-0').modal('hide');
$('.window-1').modal('show');
});
$('.button-1').click(function() {
$('.window-1').modal('hide');
$('.window-2').modal('show');
});
$('.button-2').click(function() {
$('.window-2').modal('hide');
$('.window-3').modal('show');
});
$('.button-3').click(function() {
$('.window-3').modal('hide');
$('.window-4').modal('show');
});
//$('.modal-header > .close').click(function() {
// counter = 0;
//});
});
Here is what my html looks like (php function)
<div class="modal fade window-' . $number . '" id="' . $name . '" tabindex="-1" role="dialog" aria-labelledby="' . $name . '" aria-hidden="true" data-backdrop="' . $backdrop . '">
<div class="modal-dialog ' . $class . '" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deletemessage">' . $header .'</strong></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
BODY
</div>
</div>
</div>
</div>
<button class="button-modal">Button 1</button>
<button class="button-modal">Button 2</button>
<button class="button-modal">Button 3</button>
<script>
var counter = 0;
var step = 1;
var prev = 0;
$(document).ready(function() {
$('.button-modal').each(function() {
counter++;
prev = counter - step;
$(this).on('click', function() {
$('.window-'+prev).modal('hide');
$('.window-'+counter).modal('show');
};
});
});
</script>
Give the buttons the same class like 'button-modal'. Then use the class to get the buttons and for each of them add a click listener to hide your previous modal and show your next modal.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.