JS Common pop-up box learning

pop-up box for simulation system

The system comes with a popup box summary link http://blog.csdn.net/anhuidelinger/article/details/17024491

Refer to this web site to learn modal box dynamic pop-up http://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/, the website provides packaged resources to download.

the basic structure in HTML:

<divclass="Md-modal md-effect-1"Id="modal-1"> <divclass="md-content">  isA modal window. You can DoThe following things with it:</p> <ul> <li><strong>Read:</strong> Modal windows Would probably tell you something important so don't forget to read what it says.</li><li><strong>Look:</strong> modal windows enjoy a certain kind of attention; Just look at it and appreciate their presence.</li> <li><strong>Close:</strong> click on the button below to close the modal.</li> </ul> <buttonclass="Md-close">close me!</button> </div> </div></div>...<divclass="Md-overlay"></div>

Use JS to control the classs of the Md-modal elements to animate the modal frame.

In this paper, we do not refer to jquery but encapsulate the native JS to get a Classie object.

* Classie.has (Elem,'My-class'),true/falseThe Boolean value is based on whether the element contains the specified classname (my-class) to make a judgment* Classie.add (Elem,'My-new-class'), add classname to the element (my-New-class)* Classie.remove (Elem,'My-unwanted-class'), delete classname for element (my-unwanted-class)*classie.toggle (Elem,'My-class'), Element switch classname (my-class), if the element contains this class is deleted, no is added.

A classlist attribute is used to create this object. This guy is actually native, and its constructor is Domtokenlist, which provides these known api:length, item, add, remove, contains, toggle. See this magical thing in the console, document.body.classlist!

The JS section dynamically adds time to an element (Div.md-overlay in the text), Element.addeventlistener ("eventstring", CallBack), to remove the event of the element itself before starting, Because the AddEventListener method can bind the same event multiple times for an element.

This is how the events in jquery are bound in the same way as this one, and it is necessary to first remove the time in the binding.

CSS mainly uses the transition transition properties, control the display of elements by controlling the properties of transfrom (translate scale rotate) transform-style:perspective-3d opacity

3d perspective the use of visual range and the 3d z-axis distance, on the 3-axis deg problem (from the positive view of each axis back, positive angle represents clockwise, negative angle represents counterclockwise)

main style before effect starts

/* The last few effects require a 3d effect and need to use the Perspective property to define the distance of the 3d element from the view, measured in pixels */

. md-perspective Body {background: #222; -webkit-perspective:600px; -moz-perspective:600px; perspective:600px;}. MD-modal {position:fixed; Top: -%; Left: -%; Width: -%; Max-width:630px; Min-width:320px;   Height:auto; Z-index: -;   Visibility:hidden; -webkit-backface-Visibility:hidden; -moz-backface-Visibility:hidden; Backface-Visibility:hidden; -webkit-transform:translatex (- -%) Translatey (- -%); -moz-transform:translatex (- -%) Translatey (- -%); -ms-transform:translatex (- -%) Translatey (- -%); Transform:translatex (- -%) Translatey (- -%);/*is the element centered*/}

/* Transition  Transition Properties */

. md-Overlay {position:fixed; Width: -%; Height: -%;   Visibility:hidden; Top:0; Left:0; Z-index: +; Opacity:0; Background:rgba (143, -, the,0.8); -webkit-transition:all0. 3s; -moz-transition:all0. 3s; Transition:all0.3s;/*transitions, all attributes 0,3miao*/}

/* Control the display of Div.md-overlay based on this selector by adding md-show to Div.md-modal. The elements of the Visibility:hidden, although on top of some elements but do not hinder the events of these elements */

. md-show ~. md-Overlay {   1;   visibility:visible;}

---------do not consider compatibility------(transform, transition)

Effect one: fade in, enlarge.

Css:

. md-effect-1 . md-Content {   Transform:scale (0.7);    0 ;    0. 3s;

/ * TRANSITON-PROPERTY:OPACITY,TRANSFORM;TRANSITION-DURATION:0.3S;TRANSITON-TIMING-FUNCTION:EASE; transition-delay:0; */}.md-show.md-effect-1 . md-Content {   Transform:scale (1 );    1 ;} Effective

Effect two: Swipe in from the right.

CSS: .

Md-effect-2. md-content {   Transform:translatex (20%);   opacity:0;   Transition:all 0.3s cubic-bezier (0.25, 0.5, 0.5, 0.9);

/* Transiton-property:opacity,transform;transition-duration:0.3s;transiton-timing-function:cubic-bezier ( 0.25,0,5,0,5,0.9); transition-delay:0; */}. md-show.md-effect-2. md-content {      Transform:translatex (0);       Opacity:1;}

effect Three: from slipping into

Css:

. md-effect-3. md-content {   opacity:0;   Transition:all 0.3s; / *  ditto */}.md-show.md-effect-3. md-content {   transform:translatey (0);   Opacity:1;}

Effect Four: News category (rotated into, from small to large)

Css

. md-effect-4. md-content {    transform:scale (0) rotate (720deg);/*  rotate 720 degrees positive clockwise, negative number counterclockwise  */    opacity:0;}. md-show.md-effect-4 ~. md-overlay,.md-effect-4. md-content {    transition:all 0.5s;  /* TRANSITION-PROPERTY:TRANSFORM,OPACITY;TRANSITION-DURATION:0.5S;TRANSITION-TIMING-FUNCTION:EASE; transtion-delay:0;*/}.md-show.md-effect-4. md-content {    Transform:scale (1) rotate (0deg);    Opacity:1;}

Effect Five: Whereabouts

Css

. md-effect-5.md-modal {    perspective:1300px;  /* Set sight distance 1300px */}.md-effect-5. md-content {    transform-style:preserve-3d;/* transform style flat child elements will not retain the period 3 position  Perspective-3d  child element retains 3d position */    Transform:translatez (600px) Rotatex (20deg);/ * Initial z-axis forward position 600px (perpendicular to screen orientation, Near our side for z-axis positive) x-axis forward look past (on the screen from left to right) clockwise rotation 20 degrees */    opacity:0;}. Md-show.md-effect-5. md-content {    transition:all 3s ease-in;    Transform:translatez (0px) Rotatex (0deg);     Opacity:1;}

Effect VI: Slide in and slip together

Css

. md-effect-6.md-modal {
   perspective:1300px;
}

. md-effect-6. md-content {
   transform-style:preserve-3d;
   Transform:translate (30%) Translatez (600px) rotate (10deg);/ * Translate (30%)->translatex (30%); Translatey (30 %), similarly rotate () */
   opacity:0;
}

. md-show.md-effect-6. md-content {
   Transition:all 3s ease-in;
   Transform:translate (0%) translatez (0) rotate (0deg);
   Opacity:1;
}

Effect Seven: Slide in and fix on top of screen

Css

. md-effect-7{    top:0;    Transform:translatex (-50%);}. Md-effect-7. md-content {    transform:translatey ( -200%);    Transition:all. 3s;

/ * TranslateX ( -50%-> 0); Translatey ( -200%, 0) opaacity (0, 1) border-bottom-right (0, 3px) border-bot Tom-left (0-3px) */    opacity:0;}. Md-show.md-effect-7. md-content {    transform:translatey (0%);    border-radius:0 0 3px 3px;    Opacity:1;}

Effect Eight: Flip horizontally

Css

. md-effect-8.md-modal {    perspective:1300px;}. Md-effect-8. md-content {    transform-style:preserve-3d;    Transform:rotatey ( -70DEG); / * Turn counterclockwise 70 degrees from the y-axis forward View *    / Transition:all 0.3s;    opacity:0;}. Md-show.md-effect-8. md-content {    transform:rotatey (0deg);    Opacity:1;}

Effect Nine: Flip vertically

Css

. md-effect-9.md-modal {    perspective:1300px;}. Md-effect-9. md-content {    transform-style:preserve-3d;    Transform:rotatex ( -70DEG); / * Turn counterclockwise from the x-axis 70 degrees *    / Transition:all 0.3s;    opacity:0;}. Md-show.md-effect-9. md-content {    Transform:rotatex (0deg);    Opacity:1;}

Effect Ten: 3d transfer
Css

. md-effect-10.md-modal {    perspective:1300px;}. Md-effect-10. md-content {    transform-style:preserve-3d;    Transform:rotatex ( -60deg);    transform-origin:50% 0;  / * Specify the origin position at the midpoint of the top of the element *    / opacity:0;    Transition:all 0.3s;}. Md-show.md-effect-10. md-content {    Transform:rotatex (0deg);    Opacity:1;}

JS Common pop-up box learning