diff --git a/assets/css/src/components/_modal.scss b/assets/css/src/components/_modal.scss index a12f6625a5..7486204979 100644 --- a/assets/css/src/components/_modal.scss +++ b/assets/css/src/components/_modal.scss @@ -37,7 +37,7 @@ body.mailpoet_modal_opened { z-index: 100001 !important; } -.mailpoet_modal_overlay.mailpoet_overlay_hidden { +.mailpoet_modal_overlay.mailpoet_overlay_transparent { background-color: transparent; } @@ -73,7 +73,7 @@ body.mailpoet_modal_opened { z-index: 0; } -.mailpoet_overlay_hidden .mailpoet_popup_wrapper { +.mailpoet_overlay_transparent .mailpoet_popup_wrapper { border: 1px solid #333; } diff --git a/assets/js/src/modal.js b/assets/js/src/modal.js index 1d1480abcb..90871e7aca 100644 --- a/assets/js/src/modal.js +++ b/assets/js/src/modal.js @@ -66,7 +66,8 @@ MailPoet.Modal = { height: 'auto', // display overlay - overlay: false, + overlay: false, // Controls background of overlay, false means transparent + overlayRender: true, // Controls display property, false means hidden // focus upon displaying focus: true, @@ -133,7 +134,7 @@ MailPoet.Modal = { this.initOverlay(); // toggle overlay - this.toggleOverlay(this.options.overlay); + this.setOverlay(this.options.overlay); if (this.options.type !== null) { // insert modal depending on its type @@ -193,15 +194,14 @@ MailPoet.Modal = { } return this; }, - toggleOverlay: function (toggle) { - if (toggle === true) { + setOverlay: function (showBackground) { + if (showBackground === true) { jQuery('#mailpoet_modal_overlay') - .removeClass('mailpoet_overlay_hidden'); + .removeClass('mailpoet_overlay_transparent'); } else { jQuery('#mailpoet_modal_overlay') - .addClass('mailpoet_overlay_hidden'); + .addClass('mailpoet_overlay_transparent'); } - return this; }, setupEvents: function () { @@ -453,6 +453,9 @@ MailPoet.Modal = { return this; }, showOverlay: function () { + if (!this.options.overlayRender) { + return this; + } jQuery('#mailpoet_modal_overlay').show(); jQuery('body').addClass('mailpoet_modal_opened'); return this;