modalEffects.js 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. /**
  2. * modalEffects.js v1.0.0
  3. * http://www.codrops.com
  4. *
  5. * Licensed under the MIT license.
  6. * http://www.opensource.org/licenses/mit-license.php
  7. *
  8. * Copyright 2013, Codrops
  9. * http://www.codrops.com
  10. */
  11. var ModalEffects = (function() {
  12. function init() {
  13. var overlay = document.querySelector( '.md-overlay' );
  14. [].slice.call( document.querySelectorAll( '.md-trigger' ) ).forEach( function( el, i ) {
  15. var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ),
  16. close = modal.querySelector( '.md-close' );
  17. function removeModal( hasPerspective ) {
  18. classie.remove( modal, 'md-show' );
  19. if( hasPerspective ) {
  20. classie.remove( document.documentElement, 'md-perspective' );
  21. }
  22. }
  23. function removeModalHandler() {
  24. removeModal( classie.has( el, 'md-setperspective' ) );
  25. }
  26. el.addEventListener( 'click', function( ev ) {
  27. classie.add( modal, 'md-show' );
  28. overlay.removeEventListener( 'click', removeModalHandler );
  29. overlay.addEventListener( 'click', removeModalHandler );
  30. if( classie.has( el, 'md-setperspective' ) ) {
  31. setTimeout( function() {
  32. classie.add( document.documentElement, 'md-perspective' );
  33. }, 25 );
  34. }
  35. });
  36. if(!close) {
  37. return
  38. }
  39. close.addEventListener( 'click', function( ev ) {
  40. ev.stopPropagation();
  41. removeModalHandler();
  42. });
  43. } );
  44. }
  45. init();
  46. })();