I have some dynamic modals that appear after a click on a div. I want to join those modals through two prev/next arrows and let people, who click on the arrows go between the modals without having to close the current modal and open the next one.
click here to see what I'm working on. if you click on the arrow I need to go to the next prev popup modal.
So the arrows don't work
Here's the code: [
var countModal =0; // Get the button that opens the modal $('.plan-wrapper').on('click', function() { var id = $(this).data('id'); console.log($(this).data('count')); $('#myModal_'+id).css('display', 'flex'); countModal = $(this).data('count'); }) // Get the button that opens the modal $('.chiudi_dimensione').on('click', function() { var id = $(this).data('id'); $('#myModal_'+id).hide(); }) $listModal = $('.mymodal'); console.log($listModal); $('.freccia-indietro').on('click', function(value){ console.log($listModal[countModal]); $listModal[countModal].style.display = 'none'; countModal = countModal -1; if(countModal<0){ coutModal=$listModal.count; } $listModal[countModal].style.display = 'flex'; }) $('.freccia-indietro').on('click', function(value){ countModal = countModal +1; if(countModal>$listModal.count){ coutModal=0; } })
<script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script> <div class="plan-wrapper" data-id='<?php echo $id; ?>'> <div style="opacity:1" id="myModal_<?php echo $id; ?>" class="lightbox_wrapper_dimensione"> <div data-id='<?php echo $id; ?>' class="chiudi_dimensione">X</div> <div class="freccia-indietro"></div> <div class="freccia-avanti"></div> </div>
1 no class myModal seems to be present in your html maybe you should give class=myModal
attribute to all your modals to retrive'em via $listModal = $('.mymodal');
2 you have a typo coutModal
instead of countModal
3 to get the length of jquery collection use length
not count
replace $listModal.count;
with $listModal.length;
e facci sapere ;)
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.