joaopereirawd / animatedModal.js

animatedModal.js is a jQuery plugin to create a fullscreen modal with CSS3 transitions. You can use the transitions from animate.css or create your own transitions.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

With multiple modals close-animatedModals not working

bho01 opened this issue · comments

I have 3 modals. close animated modal class works on the first one, but on the other two, it does not do anything

Did you change the class of the model.
For example, if your model is <div id="animatedModal2">
Your code should be to close the modal:

<div class="close-animatedModal2">
            <i class="fa fa-times" aria-hidden="true"></i>
 </div>

how to use multiple modal?

The docs are not clear. To use multiple modals you need to create a new link:
id="link1" href="modalid". And the modal id should match id="modalid".
One more step, on the jquery script, you need to add the link id as $("#link1, #link2").animatedModal();
Here is a Codepen that has a good example: https://codepen.io/romswellparian/pen/JdbEvV

Try this working fine.

$("#demo01").animatedModal({
modalTarget: 'animatedModal01'
});

$("#demo02").animatedModal({
modalTarget: 'animatedModal02'
});