examples.modals.js 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. (function( $ ) {
  2. 'use strict';
  3. /*
  4. Basic
  5. */
  6. $('.modal-basic').magnificPopup({
  7. type: 'inline',
  8. preloader: false,
  9. modal: true
  10. });
  11. /*
  12. Sizes
  13. */
  14. $('.modal-sizes').magnificPopup({
  15. type: 'inline',
  16. preloader: false,
  17. modal: true
  18. });
  19. /*
  20. Modal with CSS animation
  21. */
  22. $('.modal-with-zoom-anim').magnificPopup({
  23. type: 'inline',
  24. fixedContentPos: false,
  25. fixedBgPos: true,
  26. overflowY: 'auto',
  27. closeBtnInside: true,
  28. preloader: false,
  29. midClick: true,
  30. removalDelay: 300,
  31. mainClass: 'my-mfp-zoom-in',
  32. modal: true
  33. });
  34. $('.modal-with-move-anim').magnificPopup({
  35. type: 'inline',
  36. fixedContentPos: false,
  37. fixedBgPos: true,
  38. overflowY: 'auto',
  39. closeBtnInside: true,
  40. preloader: false,
  41. midClick: true,
  42. removalDelay: 300,
  43. mainClass: 'my-mfp-slide-bottom',
  44. modal: true
  45. });
  46. /*
  47. Modal Dismiss
  48. */
  49. $(document).on('click', '.modal-dismiss', function (e) {
  50. e.preventDefault();
  51. $.magnificPopup.close();
  52. });
  53. /*
  54. Modal Confirm
  55. */
  56. $(document).on('click', '.modal-confirm', function (e) {
  57. e.preventDefault();
  58. $.magnificPopup.close();
  59. });
  60. /*
  61. Form
  62. */
  63. $('.modal-with-form').magnificPopup({
  64. type: 'inline',
  65. preloader: false,
  66. focus: '#name',
  67. modal: true,
  68. // When elemened is focused, some mobile browsers in some cases zoom in
  69. // It looks not nice, so we disable it:
  70. callbacks: {
  71. beforeOpen: function() {
  72. if($(window).width() < 700) {
  73. this.st.focus = false;
  74. } else {
  75. this.st.focus = '#name';
  76. }
  77. }
  78. }
  79. });
  80. /*
  81. Ajax
  82. */
  83. $('.simple-ajax-modal').magnificPopup({
  84. type: 'ajax',
  85. modal: true
  86. });
  87. }).apply( this, [ jQuery ]);