Mobile End Multiplicity Structure series 12--popup

Reprinted from Http://www.w3cplus.com/mobile/mobile-terminal-refactoring-popup.html

There are two kinds of popup: one is the content is more, direct to full-screen display, one is a little content popup hint, two

First on Demo:

Popup test

Popup page

The first form, the design structure is as follows:

<Headerclass="Header" ></Header><Divclass="Wrap-page" ><Sectionclass="Page" ></Section> ...</Div><Footerclass="Footer" ></Footer><Sectionclass="Popup-page" ><div class=  "POPUP-HD" ><span class= "Btn-close" > </span></ div> < div class= "POPUP-BD" ></div></ SECTION>            

Because this form of content may be longer, there may be scrolling effect, so the head (with the Close button) is fixed, the animation design using translate offset and opacity to do, here is used from below to enter the visual range. By adding the Delete active class to control the element display hidden,

The SCSS code is as follows:

. popup-page{position:fixed; Top0; Bottom0; Left0; Right0; Opacity0; Background-color:#fff; Padding-top:35px; Z-Index$zIndexOverlay +5;@include Translate3d (0,100%,0);@extend%transition-transform; &.active{opacity:1;@include Translate3d (0,0,0); }. popup-hd{Position:absolute; Left:0; Top: 0; Right: 0; height: 35px Border-bottom: 1px solid $ Primary Padding-left: 10px;. Btn-close{position:absolute; Right: 0; Top: 0; font-size: 30px; width: 35PX; Text-align: Center Cursor:pointer; &:active,&:hover{background-color:  $primary; color:  #fff;}}} . popup-bd{padding: 10px; height: 100%;  @extend %scroll-touch; p{margin-bottom: 10px;}}}    

Popup over

The design structure is as follows:

<Headerclass="Header" ></Header><Divclass="Wrap-page" ><Sectionclass="Page" ></Section> ...</div><footer class= "footer" >< span class= "tag" ></footer>< div class=  "overlay" >< section class= "Popup-over" ></section></DIV>        

This is the first to calculate the positioning, this animation using scale and opacity to fix, also by adding delete active this class to control the element display hidden

. popup-over{Background-color:#fff; Border-radius:8px;    Position:absolute; Top0; Left0; Width200px; Padding10px; Z-Index$zIndexOverlay +5; opacity: 0; @include Transform (Translate3d (0, 0, 0) scale (0.  815)); @extend %transition-transform; &.active {opacity: 1; @include Transform (Translate3d (0, 0, 0) scale (1)), &::before{ @include triangle ( Top, 10px, #fff); position:absolute; Left: %; Top:-10px; Margin-left:-10px;}}  

Summarize

When using transition animations, make sure that display is not a none state before the animation starts, and then an event can be called after the animation ends, and the overlay in the transtionend demo is called this event.

Mobile End Multiplicity Structure series 12--popup