js 常見彈出框學習

模擬系統的彈出框

系統自帶的彈出框 總結 鏈接  http://blog.csdn.net/anhuidelinger/article/details/17024491

參考這個網站學習模態框的動態彈出   http://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/，網站提供打包好的資源下載。

html中的基本結構：

<div class="md-modal md-effect-1" id="modal-1">
  <div class="md-content">
    <h3>Modal Dialog</h3>
    <div>
      <p>This is a modal window. You can do the following things with it:</p>
      <ul>
        <li><strong>Read:</strong> Modal windows will 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 its presence.</li>
        <li><strong>Close:</strong> click on the button below to close the modal.</li>
      </ul>
      <button class="md-close">Close me!</button>
    </div>
  </div>
</div>

...

<div class="md-overlay"></div>

通過js來控制 .md-modal 元素的classs來實現模態框的動畫效果。

文中沒有引用jquery 而是對原生js進行封裝得到個classie對象；

* classie.has( elem, 'my-class' ) -> true/false 布爾值 根據元素是否含有指定的classname(my-class)來做出判斷

* classie.add( elem, 'my-new-class' ) -> 為元素加上classname(my-new-class)

* classie.remove( elem, 'my-unwanted-class' )-> 為元素刪除classname(my-unwanted-class)

*classie.toggle( elem, 'my-class' ) -> 元素切換classname（my-class），如果元素含有這個class則刪除，沒有則添加。

 

創造這個對象時用到一個 classList 屬性。這個家伙竟然是原生的 ,它的構造器是DOMTokenList，它提供了這些已知的API：length、item、add、remove、contains、toggle。請在控制台中查看這個神奇的東西，document.body.classList!

 js 部分 中的動態為一個元素（文中是div.md-overlay）添加時間，element.addEventListener(“eventString”,callBack),要在開始前先移除元素本身的事件，因為addEventListener方法可以為元素綁定相同事件多次。

這點jquery中的事件的綁定方式和這個是一樣的，都需要先移除一次時間在綁定。

css中主要用到了transition過渡屬性，通過控制 transfrom( translate scale rotate  ) transform-style:perspective-3d  opacity 等屬性來控制元素的顯示

3d中perspective 視距的運用以及3d時的z軸距離，在3軸上的deg問題（從每個軸的正向看回去，正角度代表順時針，負角度代表逆時針）

效果未開始前的主要樣式

 

/* 最后幾個效果需要3d效果，需要用到perspective屬性 該屬性定義3d元素距視圖的距離，以像素計 */

.md-perspective body  {
   background: #222;
   -webkit-perspective: 600px;
   -moz-perspective: 600px;
   perspective: 600px;
}

.md-modal {
   position: fixed;
   top: 50%;
   left: 50%;
   width: 50%;
   max-width: 630px;
   min-width: 320px;
   height: auto;
   z-index: 2000;
   visibility: hidden;
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   backface-visibility: hidden;
   -webkit-transform: translateX(-50%) translateY(-50%);
   -moz-transform: translateX(-50%) translateY(-50%);
   -ms-transform: translateX(-50%) translateY(-50%);
   transform: translateX(-50%) translateY(-50%);/* 是元素居中 */
}

/* transition  過渡屬性 */

.md-overlay {
   position: fixed;
   width: 100%;
   height: 100%;
   visibility: hidden;
   top: 0;
   left: 0;
   z-index: 1000;
   opacity: 0;
   background: rgba(143,27,15,0.8);
   -webkit-transition: all 0.3s;
   -moz-transition: all 0.3s;
   transition: all 0.3s;/* 過渡，所有屬性 0,3miao  */
}

/* 通過給div.md-modal添加md-show,根據這個選擇器來控制div.md-overlay的顯示。 visibility:hidden的元素雖然在某些元素的上面但是不妨礙這些元素的事件 */

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

---------不考慮兼容性------ （transform、transition）

 效果一：淡入，放大。

css: 

.md-effect-1 .md-content {

   transform: scale(0.7);
   opacity: 0;
   transition: all 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);
   opacity: 1;
}
 效

  

效果二：從右邊滑入。

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;
}

 效果三：從下滑入

css：

 

.md-effect-3 .md-content {
   opacity: 0;
   transition: all 0.3s;/* 同上 */
}

.md-show.md-effect-3 .md-content {
   transform: translateY(0);
   opacity: 1;
}

 效果四：新聞類（旋轉進入，從小變大）

css

.md-effect-4 .md-content {
    transform: scale(0) rotate(720deg);/*  旋轉720度 正數順時針，負數逆時針  */
    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;
}

效果五：下落

css

.md-effect-5.md-modal {
    perspective: 1300px;/* 設置視距1300px */
}

.md-effect-5 .md-content {
    transform-style: preserve-3d;/* transform樣式 flat 子元素將不保留期3位置  perspective-3d  子元素保留3d位置 */
    transform: translateZ(600px) rotateX(20deg); /* 初始時z軸正向位置600px（垂直於屏幕方向，靠近我們的一側為z軸正向） x軸正向看過去（在屏幕上從左向右看過去）順時針旋轉20度 */
    opacity: 0;
}

.md-show.md-effect-5 .md-content {
    transition: all 3s ease-in;
    transform: translateZ(0px) rotateX(0deg); 
    opacity: 1;
}

 效果六：滑入和滑落結合

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%),同理 rotate（） */
   opacity: 0;
}

.md-show.md-effect-6 .md-content {
   transition: all 3s ease-in;
   transform: translate(0%) translateZ(0) rotate(0deg);
   opacity: 1;
}

效果七：滑入並且固定在屏幕上方

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-bottom-left(0 -> 3px)*/
    opacity: 0;
}

.md-show.md-effect-7 .md-content {
    transform: translateY(0%);
    border-radius: 0 0 3px 3px;
    opacity: 1;
}

效果八：水平翻轉

css

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

.md-effect-8 .md-content {
    transform-style: preserve-3d;
    transform: rotateY(-70deg);/* 從y軸正向看去逆時針轉70度 */
    transition: all 0.3s;
    opacity: 0;
}

.md-show.md-effect-8 .md-content {
    transform: rotateY(0deg);
    opacity: 1;
}

效果九：垂直翻轉

css

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

.md-effect-9 .md-content {
    transform-style: preserve-3d;
    transform: rotateX(-70deg);/* 從X軸正向看去逆時針轉70度*/
    transition: all 0.3s;
    opacity: 0;
}

.md-show.md-effect-9 .md-content {
    transform: rotateX(0deg);
    opacity: 1;
}

效果十：3d 轉入
css

.md-effect-10.md-modal {

    perspective: 1300px;
}

.md-effect-10 .md-content {
    transform-style: preserve-3d;
    transform: rotateX(-60deg);
    transform-origin: 50% 0;   /* 規定原點位置 在元素上邊的中點為原點 */
    opacity: 0;
    transition: all 0.3s;
}

.md-show.md-effect-10 .md-content {
    transform: rotateX(0deg);
    opacity: 1;
}