欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

SCSS移動端頁面遮罩層效果的實現(xiàn)及常見問題解決

e3cplus   發(fā)布時間：2016-06-09 10:51:31   作者：結(jié)一   我要評論
這篇文章主要介紹了SCSS移動端頁面遮罩層效果的實現(xiàn)及常見問題解決,使用CSS的預(yù)處理器框架SCSS寫起來比原生CSS會來得更加簡便一些,需要的朋友可以參考下

實例
可以兼容安卓4.0.4+：
201669105353262.jpg (320×436)

設(shè)計結(jié)構(gòu)如下：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <header class="header"></header>  
  2. <div class="wrap-page">  
  3.     <section class="page"></section>  
  4.     ...   
  5. </div>  
  6. <footer class="footer"></footer>  
  7. <div class="overlay">  
  8.     <section class="modal">  
  9.         <div class="modal-hd"></div>  
  10.         <div class="modal-bd"></div>  
  11.         <div class="modal-ft"></div>  
  12.     </section>  
  13. </div>  

這個overlay遮罩層的問題，現(xiàn)在這里說明下為什么這么設(shè)計。

一般來說看到的overlay都與modal是兄弟元素，而不是嵌套關(guān)系。本來我也是這么設(shè)計的，這就是習(xí)慣。后來由于modal居中的問題，重新審視了下這個問題：

為什么遮罩層的overlay與彈窗內(nèi)容是兄弟元素？

說實話真想不出什么理由，非得搞成兄弟元素。后來突然意識到以前的遮罩層如果不采用半透明圖片的話，就得使用opacity（ie6-8不支持，通過濾鏡模擬），而這個屬性會對整個子元素都起作用，而且還沒辦法通過子元素覆寫這個值。這是我能想到的一條最佳理由，如果還有其他理由歡迎交流。

對于高上大的移動端來說，都是rgba時代了，所以opacity回家吃飯先。既然這個對子元素的影響已經(jīng)不是問題，那么嵌套關(guān)系就可以成立，而且嵌套還有一個非常好的理由，水平垂直居中，flex小指一動即可。而兄弟元素的水平垂直居中就得設(shè)置modal的top和left的值為50%，然后再設(shè)置translate的x和y方向都-50%

所以果斷拋棄兄弟元素設(shè)計換成嵌套關(guān)系。

因為overlay采用了flex布局來控制子元素居中，所以不難呢過采用display為none/block來顯示隱藏遮罩層overlay，而是通過z-index的層級來控制，而modal部分通過添加刪除modal-in這個class來控制顯示隱藏

scss代碼如下：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .overlay{   
  2.     position: fixed;   
  3.     top: 0;   
  4.     rightright: 0;   
  5.     bottombottom: 0;   
  6.     left: 0;   
  7.     z-index: -1;   
  8.     background-color: rgba(0,0,0,.8);   
  9.     @include flex-center; // flex水平垂直居中   
  10. }   
  11. .overlay.active {   
  12.   z-index: 980;   
  13. }   
  14.   
  15. $modalBarHeight: 40px !default;   
  16. $modalBdPadding: 15px;   
  17.   
  18. .modal{   
  19.     background-color: #fff;   
  20.     border-radius: 5px;   
  21.     margin: 0 10px;   
  22.     overflow: hidden;   
  23.     opacity: 0;   
  24.     @include transform(translate3d(0,0,0) scale(0.815));   
  25.     @extend %all-transition;   
  26.     @include transition-property(transform, opacity);   
  27.   
  28.     &.modal-in{   
  29.         opacity: 1;   
  30.         @include transform(translate3d(0,0,0) scale(1));   
  31.     }   
  32.   
  33.     .modal-hd{   
  34.         text-align: center;   
  35.         line-height: $modalBarHeight;   
  36.         background-color: $primary;   
  37.         color: #fff;   
  38.     }   
  39.     .modal-bd{   
  40.         padding: $modalBdPadding;   
  41.     }   
  42.     .modal-ft{   
  43.         border-top: 1px solid $gray;   
  44.         @extend %display-flex;   
  45.         .btn-modal{   
  46.             @include flex(1);   
  47.             background-color: #fefefe;   
  48.             text-align: center;   
  49.             line-height: $modalBarHeight;   
  50.             color: $primary;   
  51.             &:first-child{   
  52.                 border-right: 1px solid $gray;   
  53.             }   
  54.             &:last-child{   
  55.                 border-right: none;   
  56.             }   
  57.             &:hover,&:active{   
  58.                 background-color: #d9d9d9;   
  59.             }   
  60.         }   
  61.     }   
  62. }  


常見問題解決
移動端模擬彈窗時，遇到一些問題，現(xiàn)總結(jié)如下，以加深記憶。

情況一：
當(dāng)body高度大于viewport高度時，在彈窗上滑動時，會遇到body也跟著滑動的現(xiàn)象。

解決思路：
禁止touchmove，及overflow:hidden來實現(xiàn)，參考下面代碼：

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. /**  
  2.  * 初始化彈窗  
  3.  */  
  4. var initDialog = (function() {   
  5.     var _tmpl = baidu.template('dialog-tpl', {});   
  6.   
  7.     return {   
  8.         tmpl : $(_tmpl),   
  9.   
  10.         /**  
  11.          * [create 創(chuàng)建彈窗]  
  12.          * @return {[type]} [description]  
  13.          */  
  14.         create: function() {   
  15.             var me = this,   
  16.                 _tmpl = me.tmpl;   
  17.   
  18.             $('body')   
  19.   
  20.             // 禁用鼠標(biāo)滾輪滾動   
  21.             .css('overflow', 'hidden')   
  22.   
  23.             .append(_tmpl)   
  24.   
  25.             // 禁止touchmove，阻止body滑動   
  26.             .on('touchmove', function(e) {   
  27.                 e.preventDefault();   
  28.             })   
  29.   
  30.             // 關(guān)閉動作   
  31.             .on('tap', 'dialog-close', function() {   
  32.                 me.destroy();   
  33.             })   
  34.         },   
  35.   
  36.         /**  
  37.          * [destroy 銷毀彈窗]  
  38.          * @return {[type]} [description]  
  39.          */  
  40.         destroy: function() {   
  41.             this.tmpl.remove();   
  42.   
  43.             // 解除touchmove綁定、啟用滾動   
  44.             $('body').off().css('overflow', 'auto');   
  45.         }   
  46.     }   
  47. })();  

情況二：
軟鍵盤彈起時，自定彈窗不能鋪滿全屏

解決思路：
打開彈窗前，通過javascript的blur事件來收起軟鍵盤。

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. $(“:focus”).blur();  

情況三：
實現(xiàn)toast組件時，如果toast使用
position: fixed;bottom:-3rem;即離底部比較近時，按照我們正常想法應(yīng)該是鍵盤把頁面往上推，但是在IOS及Andriod UC瀏覽器中會出現(xiàn)toast被鍵盤覆蓋，即使我們設(shè)置z-index也無濟(jì)于事，因為鍵盤在整個瀏覽器的上層。

解決思路：
出現(xiàn)toast的時候，監(jiān)聽所有控件的事件，當(dāng)focus時，動態(tài)計算當(dāng)前位置，重新計算。但是有個問題，不同機(jī)型鍵盤的高度不統(tǒng)一。M端部分參考代碼：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style type="text/css">   
  2.     body {   
  3.         text-align: center;   
  4.     }   
  5.     input[type=text] {   
  6.         width: 80%;    
  7.         height: .8rem;   
  8.         margin-top: .3rem;   
  9.     }   
  10.     .toast {   
  11.         position: fixed;    
  12.         bottombottom: .3rem;    
  13.         left: 50%;    
  14.         margin-left: -1rem;    
  15.         width: 2rem;    
  16.         height: 1rem;    
  17.         background-color: #f00;    
  18.         border-radius: 10px;   
  19.         color: #fff;   
  20.     }   
  21. </style>   
  22. <input type="text">   
  23. <div class="toast">Toast</div>  

相關(guān)文章

  • CSS實現(xiàn)鼠標(biāo)移至圖片上顯示遮罩層效果

    這篇文章主要介紹了CSS實現(xiàn)鼠標(biāo)移至圖片上顯示遮罩層效果，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友參考下吧
    2019-11-20

  • css div實現(xiàn)的遮罩層完美兼容IE6-IE9 FireFox

    css div 遮罩層想必熟悉網(wǎng)頁的朋友都不陌生吧，網(wǎng)上也有相關(guān)的實現(xiàn)文章，不過大都對瀏覽器的兼容性不好，在本文將為大家介紹的是一個可以兼容IE6-IE9 FireFox 的遮罩層，感
    2013-10-11

  • CSS實現(xiàn)帶遮罩層可關(guān)閉的彈窗效果

    這篇文章主要介紹了CSS實現(xiàn)帶遮罩層可關(guān)閉的彈窗效果,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-03-09

最新評論