custom ID ?

[daslicht]

why is this code invalid :

<a id="fullscreenButton" href="#myAnimatedModal"></a>

<div id="myAnimatedModal">

    <div class="close-myAnimatedModal"></div>

    <div class="modal-content">
          my content comes here
    </div>

</div>

I don't get any error but the content is just shown ?

[bkoplin]

Did you get an answer to this? I have the same issue when I change any of the class or tag names…

[daslicht]

I have solved it like this in octobercms:

<a class="hidden-xs-down fullscreen-button" id="{{ fullscreenButtonID }}" href="#{{ name }}"></a>
<div id="{{ name }}">
    {#THIS IS IMPORTANT! to close the modal, the  name has to match the name given on the ID  class="close-animatedModal"#}
    <div id='bt' class="close-{{ name }} text-xs-center close-animated-modal"></div>
    <div class="modal-content">

        {% component modalContent %}
    </div>
</div>

var initializeAnimatedModal = function( fullscreenButtonID, name, fullscreenSlideshowID ) {
    $(fullscreenButtonID).animatedModal({   
        color: "#fff", 
        overflow:"hidden",
        modalTarget: name,
        beforeOpen: function () { // not working properly in safari....
            $(fullscreenSlideshowID).slick('setPosition');
        },
        afterOpen: function () { // ... safari fix.
            $(fullscreenSlideshowID).slick('setPosition');
        },
    });
}

    initializeAnimatedModal( "#shippingFullscreenButton", "shippingAnimatedModal", "#fullscreenShippingSlideshowHTML" );

[daslicht]

i think using modalTarget: name, was the key

[apurbajnu]

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