頁面彈窗處理方案

羯瑞_發表於2017-10-19

需求

1、點選按鈕彈窗

2、頁面不可滾動

3、點選空白區域彈窗隱藏

直接上程式碼

<style>
//解決蘋果手機上的QQ瀏覽器UC瀏覽器都點選body、document、window無效
body{-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color:transparent;cursor:pointer;}
.base_popup{position: fixed;width: 100%;}
</style>複製程式碼
//下面的程式碼是基於jQuery
var popScrollTop=0;
$('#protocolShowBtn').on('click',function(){
    //顯示彈窗
    protocolPopBox.show();
    //獲取當前滾動條top值
    popScrollTop=$(document).scrollTop();
    //新增class 
    $("body").addClass('base_popup');
    //設定class 
    $('body').css('top',-popScrollTop);
})
$(document).click(function () {
    //移除class
    $("body").removeClass('base_popup');
    //設定彈窗前滾動條的top值
    $(document).scrollTop(popScrollTop);
    //隱藏彈窗
    protocolPopBox.hide();
})複製程式碼

要點

1、利用固定定位fixed

2、在蘋果手機上的QQ瀏覽器UC瀏覽器都點選body、document、window無效。網上搜了一遍找到的解決方案：body{cursor: pointer;}

3、移動端點選空白區域會閃一下藍色，解決方案點選色值改成透明：body{-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;}

相關文章