Sanjeev K Sanjeev K - 2 months ago 25
CSS Question

AnimatedModel - Multiple model box not working

I am trying to run multiple model lightbox for multiple content using the plugin Animated Model

It works with the one link, but when I try to make a duplicate box it doesn't work, I think because of the model target ID defined in the JS, here is a working JSFiddle

Can anyone please suggest how can I make multiple model boxes using this plugin?

<a id="demo01" href="#animatedModal">DEMO01</a>
<div id="animatedModal">
<div class="close-animatedModal"> CLOSE MODAL </div>
<div class="modal-content">
modal content goes here
</div>
</div>

Answer

First of all in ur fiddle, 2 elements are having same ID's, which should not happen as every element should have a unique ID in a document and you can Have a look at my fiddle here - JSFiddle

with js

 //demo 01
  $("#demo01").animatedModal();

  //demo 02
  $("#demo02").animatedModal({
    modalTarget: 'animatedModal2'
  });