modalEffects.js 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. var ModalEffects = (function() {
  2. function init() {
  3. [].slice.call( document.querySelectorAll( '.md-trigger' ) ).forEach( function( el, i ) {
  4. var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ),
  5. close = modal.querySelector( '.md-close' );
  6. function removeModal( hasPerspective ) {
  7. classie.remove( modal, 'md-show' );
  8. if( hasPerspective ) {
  9. classie.remove( document.documentElement, 'md-perspective' );
  10. }
  11. }
  12. function removeModalHandler() {
  13. removeModal( classie.has( el, 'md-setperspective' ) );
  14. }
  15. el.addEventListener( 'click', function( ev ) {
  16. classie.add( modal, 'md-show' );
  17. overlay.removeEventListener( 'click', removeModalHandler );
  18. overlay.addEventListener( 'click', removeModalHandler );
  19. if( classie.has( el, 'md-setperspective' ) ) {
  20. setTimeout( function() {
  21. classie.add( document.documentElement, 'md-perspective' );
  22. }, 25 );
  23. }
  24. });
  25. close.addEventListener( 'click', function( ev ) {
  26. ev.stopPropagation();
  27. removeModalHandler();
  28. });
  29. } );
  30. }
  31. init();
  32. })();