1

The following Javascript code is linked to my modal:

var ModalEffects = (function() {

    function init() {

        var overlay = document.querySelector( '.md-overlay' );

        [].slice.call( document.querySelectorAll( '.md-trigger' ) ).forEach( function( el, i ) {

            var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ),
                close = modal.querySelector( '.md-close' );

            function removeModal( hasPerspective ) {
                classie.remove( modal, 'md-show' );

                if( hasPerspective ) {
                    classie.remove( document.documentElement, 'md-perspective' );
                }
            }

            function removeModalHandler() {
                removeModal( classie.has( el, 'md-setperspective' ) ); 
            }

            el.addEventListener( 'click', function( ev ) {
                classie.add( modal, 'md-show' );
                overlay.removeEventListener( 'click', removeModalHandler );
                overlay.addEventListener( 'click', removeModalHandler );

                if( classie.has( el, 'md-setperspective' ) ) {
                    setTimeout( function() {
                        classie.add( document.documentElement, 'md-perspective' );
                    }, 25 );
                }
            });

            close.addEventListener( 'click', function( ev ) {
                ev.stopPropagation();
                removeModalHandler();
            });

        } );

    }

    init();

})();

This is the example html code for a modal:

div class="md-modal md-effect-2" id="modal-2">
            <div class="md-content">
                <h3>Modal Dialog</h3>
                <div>
                    <p>This is a modal window. You can do the following things with it:</p>
                    <ul>
                        <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                        <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                        <li><strong>Close:</strong> click on the button below to close the modal.</li>
                    </ul>
                    <button class="md-close">Close me!</button>
                </div>
            </div>
        </div>

And this button currently triggers the modal onclick: 

<button class="md-trigger" data-modal="modal-2">Slide in (right)</button>

However, now i want to trigger the modal programmatically from an Ajax success callback, how do i actually do that to call the modal directly, rather than using the button class/data-modal?

there is also an overlay div:

<div class="md-overlay"></div><!-- the overlay element -->

Thanks!

userxxxso
  • 165
  • 2
  • 15
  • How about using a named function for your click handler, this way you're able to call it from your callback, also why are you removing the overlay event handler just to add it back in the next line? – LJᛃ Jan 01 '15 at 03:55
  • onclick will call an ajax which on success call the button and pass it the data. The issue now is that the data i want displayed in the modal needs to be sent over from the php side (e.g postid), therefore i need to use some ajax, but in this case, this script was designed to turn on the modal from the button click directly. – userxxxso Jan 01 '15 at 07:39

0 Answers0