modalEffects.js 1.1 KB

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