Refactor modal to use flexbox instead of JS for positioning

assets/css/src/modal.styl

@@ -19,6 +19,9 @@ body.mailpoet_modal_opened
   width: 100%
   z-index: 100000
   background-color: overlay_background_color
+  display: flex
+  align-items: center
+  justify-content: center
 
 .mailpoet_modal_highlight
   pointer-events: none
@@ -34,7 +37,7 @@ body.mailpoet_modal_opened
 // overlay: state
 .mailpoet_modal_overlay.mailpoet_overlay_loading
   background-color: overlay_background_color !important
-  display: block !important
+  display: flex !important
 
 .mailpoet_modal_opened .mailpoet_modal_overlay
   display: block
@@ -164,13 +167,6 @@ body.mailpoet_modal_opened
   .mailpoet_panel_body
     padding-bottom: 52px
 
-#mailpoet_loading
-  position: relative
-  left: 50%
-  top: 50%
-  margin-left: -75px
-  margin-top: -16px
-
 .mailpoet_loading
   height: 32px
   width: 150px

assets/js/src/modal.js

@@ -346,22 +346,8 @@ define('modal', ['mailpoet', 'jquery'],
         return this;
       },
       setPosition: function () {
-        var screenWidth;
-        var screenHeight;
-        var modalWidth;
-        var modalHeight;
         switch (this.options.type) {
           case 'popup':
-            screenWidth = jQuery(window).width();
-            screenHeight = jQuery(window).height();
-            modalWidth = jQuery('.mailpoet_' + this.options.type + '_wrapper').width();
-            modalHeight = jQuery('.mailpoet_' + this.options.type + '_wrapper').height();
-
-            // set position of popup depending on screen dimensions.
-            jQuery('#mailpoet_popup').css({
-              top: Math.max(48, parseInt((screenHeight / 2) - (modalHeight / 2), 10)),
-              left: Math.max(0, parseInt((screenWidth / 2) - (modalWidth / 2), 10))
-            });
             break;
           case 'panel':
             setTimeout(function () {