Mobile End multiplicity Structure Series 11--pop-up window modal

Copy from http://www.w3cplus.com/mobile/mobile-terminal-refactoring-modal.html

This series of articles, if not specifically stated, is compatible with the Android 4.0.4+

The design structure is as follows:

<Headerclass="Header" ></Header><Divclass="Wrap-page" ><Sectionclass="Page" ></Section> ...</Div><Footerclass="Footer" ></Footer><Divclass="Overlay" ><Sectionclass="Modal" ><Divclass= "MODAL-HD" ></ div> <div class= "MODAL-BD" >< span class= "tag" ></div> < div class=  "modal-ft" ></div> </section></ DIV>            

The previous nth article mentioned the problem with this overlay mask layer, and now it explains why it is so designed.

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.

Modal test

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;Top0;Right0;Bottom0;Left0; Z-Index:-1; background-Color:rgba (0,0,0,.8);@include Flex-center;Flex Horizontal vertically centered}.overlay.active {ZIndex980;}$modalBarHeight:40px!default;$modalBdPadding:15px;. modal{background-Color#fff; border-Radius5px;Margin010px;Overflow:hidden;Opacity0;@include Transform (Translate3d (0,0,0) Scale (0.815));@extend%all-transition;@include Transition-property (transform, opacity); &.modal-in{Opacity1;@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;}}}       

Move end Multiplicity series 11--pop-up window modal