SCSS Mobile page masking layer effect and solutions to common problems

Instance

Can be compatible with Android 4.0.4+:

The design structure is as follows:

The problem with this overlay mask layer is now here to explain why the design is so.

Generally seen overlay and modal are sibling elements, not nested relationships. That's how I designed it, that's the habit. Later, due to the problem of modal center, re-examined the following question:

Why is the overlay and popup content of the mask layer a sibling element?

Honestly, I can't think of any reason why I have to be a brother element. It was then suddenly realized that the previous mask layer would have to use opacity (ie6-8 not supported, through a filter simulation) if it did not adopt a translucent image, and that this property would work on the entire child element, and that it was not possible to overwrite the value with the child element. This is one of the best reasons I can think of, if there are other reasons to welcome communication.

For the high on the mobile side, are the RGBA era, so opacity home to eat first. Since the effect of this pair of elements is no longer a problem, then the nested relationship can be set up, and nested there is a very good reason, horizontal vertical center, flex little finger can move. The horizontal vertical center of the sibling element is set to the modal top and left values of 50%, and then the translate x and y directions are set-50%

So decisively abandon the brother element design into nested relationship.

Because overlay uses the Flex layout to control the centering of the child elements, it is not difficult to use display as None/block to show the hidden mask layer overlay, but to control it through the Z-index hierarchy, The modal section controls the display hiding by adding the delete modal-in class.

The SCSS code is as follows:

. overlay{position:fixed;       top:0;       rightright:0;       bottombottom:0;       left:0;       Z-index:-1;       Background-color:rgba (0,0,0,.8); @include Flex-center;   Flex horizontal Vertically Center}. overlay.active {z-index:980;   } $modalBarHeight: 40px!default;   $modalBdPadding: 15px;       . modal{Background-color: #fff;       border-radius:5px;       Margin:0 10px;       Overflow:hidden;       opacity:0;       @include transform (Translate3d (0,0,0) scale (0.815));       @extend%all-transition;       @include Transition-property (transform, opacity);           &.modal-in{opacity:1;       @include transform (Translate3d (0,0,0) scale (1));           }. modal-hd{Text-align:center;           Line-height: $modalBarHeight;           Background-color: $primary;       Color: #fff;       }. modal-bd{padding: $modalBdPadding;           }. modal-ft{border-top:1px solid $gray; @extend%display-fLex               . btn-modal{@include Flex (1);               Background-color: #fefefe;               Text-align:center;               Line-height: $modalBarHeight;               Color: $primary;               &:first-child{border-right:1px solid $gray;               } &:last-child{Border-right:none;               } &:hover,&:active{Background-color: #d9d9d9; }           }       }   }


FAQ Solution
Mobile simulation of the pop-up window, encountered some problems, now summarized as follows, to deepen memory.

Situation One:
When the body height is greater than viewport height, when sliding on the pop-up window, the body will also follow the phenomenon of sliding.

Solution Ideas:
Prohibit Touchmove, and overflow:hidden to achieve, refer to the following code:

/** * Initialize pop-up popup */var InitDialog = (function () {var _tmpl = baidu.template (' Dialog-tpl ', {});         return {tmpl: $ (_TMPL),/** * [Create popup] * @return {[type]} [description]               */Create:function () {var me = this, _tmpl = Me.tmpl; $ (' body ')//disable mouse wheel scrolling. CSS (' overflow ', ' hidden '). Append (_tmpl)//Forbidden               Touchmove, prevents the body from sliding. On (' Touchmove ', function (e) {e.preventdefault ();               })//Close action. On (' Tap ', ' dialog-close ', function () {Me.destroy (); })},/** * [Destroy Destroy popup] * @return {[type]} [description] */Destroy               : function () {this.tmpl.remove ();           Unbind Touchmove, enable scrolling $ (' body '). Off (). CSS (' overflow ', ' auto '); }       }   })();

Situation Two:
When the soft keyboard bounces, the self-tuning pop-up window cannot be covered full screen

Solution Ideas:
Before opening the pop-up window, use JavaScript's blur event to close the soft keyboard.

$ (": Focus"). blur ();

Situation Three:
When you implement a toast component, if the toast uses
Position:fixed;bottom:-3rem, which is near the bottom, according to our normal idea should be the keyboard to push the page upward, but in iOS and Andriod UC Browser will appear the toast is covered by the keyboard, even if we set the Z-index is useless, Because the keyboard is on top of the entire browser.

Solution Ideas:
When a toast occurs, listen for all the control's events, and when focus, dynamically calculate the current position and recalculate. However, there is a problem, different models of the height of the keyboard is not uniform. M-End Section reference code:

<style type= "Text/css" > body {text-align:center;            } Input[type=text] {width:80%;           Height:. 8rem;       Margin-top:. 3rem;            }. Toast {position:fixed;            Bottombottom:. 3rem;            left:50%;            Margin-left: -1rem;            Width:2rem;            Height:1rem;            Background-color: #f00;           border-radius:10px;       Color: #fff; } </style> <input type= "text" > <p class= "toast" >TOAST</P>