#98 - full screen popups, lock screen enhancements, different fixes (mostly for iOS 8 Safari)

inc/js/jquery.dolPopup.js

@@ -27,6 +27,46 @@
         offset_pointer: '0 0'
     }; 
 
+    function _getScrollbarWidth () {
+        if ($(document.body).height() <= $(window).height()) {
+            return 0;
+        }
+
+        var outer = document.createElement("div"),
+            inner = document.createElement("div"),
+            widthNoScroll,
+            widthWithScroll;
+
+        outer.style.visibility = "hidden";
+        outer.style.width = "100px";
+        document.body.appendChild(outer);
+
+        widthNoScroll = outer.offsetWidth;
+
+        // Force scrollbars
+        outer.style.overflow = "scroll";
+
+        // Add innerdiv
+        inner.style.width = "100%";
+        outer.appendChild(inner);
+
+        widthWithScroll = inner.offsetWidth;
+
+        // Remove divs
+        outer.parentNode.removeChild(outer);
+
+        return widthNoScroll - widthWithScroll;
+    };
+
+    function _dolPopupLockScreen (bLock) {
+        var eBody = $(document.body),
+            eBodyHtml = $("html, body"),
+            iPaddingRight = parseInt(eBody.css("padding-right")) + ((bLock ? 1 : -1) * _getScrollbarWidth());
+
+        eBody.css("padding-right", iPaddingRight + "px");
+        bLock ? eBodyHtml.addClass('bx-popup-lock') : eBodyHtml.removeClass('bx-popup-lock');
+    };
+
     $.fn.dolPopup = function(options) {
         var options = options || {};
         var o = $.extend({}, $.fn.dolPopupDefaultOptions, options);
@@ -48,7 +88,8 @@
             width: $(window).width(),
             height: $(window).height(),
             opacity: o.fog.opacity,
-            backgroundColor: o.fog.color
+            backgroundColor: o.fog.color,
+            '-webkit-backface-visibility': 'hidden'
         });
         
         $(window).on('resize.popupFog', function () {
@@ -84,13 +125,13 @@
                 left: 0
             });
 
+            $el.detach().appendTo('body');
+
 
             setTimeout(function() { // timeout is needed for some browsers to render element
 
-                if (o.fog) {
-                    $('html, body').addClass('bx-popup-lock');
-                    $('.bx-main').addClass('bx-def-blur');
-                }
+                if (o.fog)
+                    _dolPopupLockScreen(true);
 
                 // remove any transitions before setting popup position
                 $el.removeClass('bx-popup-transitions bx-popup-inactive'); 
@@ -203,8 +244,7 @@
                 $el.hide(o.onHide);
             }
             
-            $("html, body").removeClass('bx-popup-lock');
-            $('.bx-main').removeClass('bx-def-blur');
+            _dolPopupLockScreen(false);
         });
     };
 

samples/popup.php

@@ -38,9 +38,9 @@ function PageCompMainCode()
 {
     ob_start();
 
-    // transBox
+    // transBox    
     echo BxTemplFunctions::getInstance()->transBox('bx-sample-popup-transbox', '<div class="bx-def-padding">transBox</div>', true);
-    echo '<button class="bx-btn bx-def-margin-sec" onclick="$(\'#bx-sample-popup-transbox\').dolPopup()">transBox</button>';
+    echo '<div></div><button class="bx-btn bx-def-margin-sec" onclick="$(\'#bx-sample-popup-transbox\').dolPopup()">transBox</button>';
 
     // transBox AJAX
     echo '<button class="bx-btn bx-def-margin-sec" onclick="$(window).dolPopupAjax({url: \'samples/popup.php?_t=a'.time().'\'})">transBox AJAX</button>';

template/css/common.css

@@ -21,9 +21,12 @@ a > img {
     border:none;
 }
 
-html,
+html {
+    height:100%;
+}
 body {
-	height: 100%; 
+	min-height: 100%;
+    min-height: 100vh;
     padding: 0;
     margin: 0;
 }
@@ -245,6 +248,42 @@ body > .bx-popup-wrapper {
     display:none;
 }
 
+/* --------------- make popup fullscreen */
+
+.bx-popup-responsive.bx-popup-trans-wrapper:not(.bx-popup-image-wrapper),
+.bx-popup-responsive:not(.bx-popup-image-wrapper) .bx-popup-trans,
+.bx-popup-responsive.bx-popup-box-wrapper,
+.bx-popup-responsive .bx-popup-box {
+    position:fixed !important;
+    width:100%;
+	width:100vw;
+    height:100%;
+    height:100vh;
+    overflow:auto;
+}
+
+.bx-popup-responsive .bx-popup-trans > div,
+.bx-popup-responsive .bx-popup-box > div {
+	border-radius:0;
+	-moz-border-radius:0;
+	-webkit-border-radius:0;
+}
+
+.bx-popup-responsive.bx-popup-image-wrapper:not(.foo) .bx-popup-border,
+.bx-popup-responsive.bx-popup-trans-wrapper:not(.foo) .bx-popup-border,
+.bx-popup-responsive.bx-popup-box-wrapper:not(.foo) .bx-popup-border {
+    border:none;
+}
+
+.bx-popup-responsive.bx-popup-image-wrapper .bx-popup,
+.bx-popup-responsive.bx-popup-trans-wrapper .bx-popup,
+.bx-popup-responsive.bx-popup-box-wrapper .bx-popup {
+	-moz-box-shadow:none;
+	-webkit-box-shadow:none;
+    box-shadow:none;
+}
+
+
 /* --------------- message box */
 
 .bx-msg-box-container {

template/css/general.css

@@ -2,7 +2,7 @@
 .bx-main {
 	position: relative;
 	min-height: 100%;
-    transition: filter 0.2s ease-in-out, -webkit-filter 0.2s ease-in-out;
+	min-height: 100vh;
 }
 
 .bx-page-image-container img,

template/css/media-phone.css

@@ -40,41 +40,6 @@ html {
     width:auto;
 }
 
-/* common.css */
-
-.bx-popup-responsive.bx-popup-trans-wrapper:not(.bx-popup-image-wrapper),
-.bx-popup-responsive:not(.bx-popup-image-wrapper) .bx-popup-trans,
-.bx-popup-responsive.bx-popup-box-wrapper,
-.bx-popup-responsive .bx-popup-box {
-    position:fixed !important;
-    width:100%;
-	width:100vw;
-    height:100%;
-    height:100vh;
-    overflow:auto;
-}
-
-.bx-popup-responsive .bx-popup-trans > div,
-.bx-popup-responsive .bx-popup-box > div {
-	border-radius:0;
-	-moz-border-radius:0;
-	-webkit-border-radius:0;
-}
-
-.bx-popup-responsive.bx-popup-image-wrapper .bx-popup-border,
-.bx-popup-responsive.bx-popup-trans-wrapper .bx-popup-border,
-.bx-popup-responsive.bx-popup-box-wrapper .bx-popup-border {
-    border:none;
-}
-
-.bx-popup-responsive.bx-popup-image-wrapper .bx-popup,
-.bx-popup-responsive.bx-popup-trans-wrapper .bx-popup,
-.bx-popup-responsive.bx-popup-box-wrapper .bx-popup {
-	-moz-box-shadow:none;
-	-webkit-box-shadow:none;
-    box-shadow:none;
-}
-
 /* page layouts */
 
 .bx-layout-col {

template/popup_box.html

@@ -1,10 +1,10 @@
-<div id="__id__" class="bx-popup-wrapper bx-popup-responsive bx-popup-box-wrapper" style="__wrapper_style__" role="dialog" aria-describedby="__id___title">
+<div id="__id__" class="bx-popup-wrapper bx-popup-responsive bx-popup-box-wrapper bx-def-box-sizing" style="__wrapper_style__" role="dialog" aria-describedby="__id___title">
     <div class="bx-popup-box-pointer"><i class="bx-popup-border"></i></div>
     <div class="bx-popup bx-popup-box bx-popup-width bx-popup-color-bg bx-popup-border bx-def-round-corners">
     <div class="bx-def-round-corners" style="overflow:hidden;">
         <div class="bx-popup-header bx-popup-color-bg bx-def-padding bx-def-font-contrasted">
             <h2 id="__id___title">__title__</h2>
-            <a href="javascript:void(0);" class="bx-popup-element-close bx-def-font-h1 bx-def-font-contrasted bx-def-margin bx-def-media-tablet-hide bx-def-media-desktop-hide"><i class="sys-icon remove"></i></a>
+            <a href="javascript:void(0);" class="bx-popup-element-close bx-def-font-h1 bx-def-font-contrasted bx-def-margin"><i class="sys-icon remove"></i></a>
         </div>
         <div class="bx-popup-content bx-def-padding">__content__</div>
     </div>

template/popup_trans.html

@@ -1,7 +1,7 @@
-<div  id="__id__" class="bx-popup-wrapper bx-popup-responsive bx-popup-trans-wrapper" style="__wrapper_style__" role="alert">
+<div  id="__id__" class="bx-popup-wrapper bx-popup-responsive bx-popup-trans-wrapper bx-def-box-sizing" style="__wrapper_style__" role="alert">
     <div class="bx-popup-box-pointer"><i class="bx-popup-border"></i></div>
     <div class="bx-popup bx-popup-trans bx-popup-border bx-popup-color-bg bx-def-round-corners">
-        <div class="bx-popup-close-wrapper bx-def-media-tablet-hide bx-def-media-desktop-hide bx-def-padding">
+        <div class="bx-popup-close-wrapper bx-def-padding">
             <a href="javascript:void(0);" class="bx-popup-element-close bx-def-font-h1 bx-def-margin"><i class="sys-icon remove"></i></a>
         </div>
         <div class="bx-popup-content" style="">__content__</div>