專業南寧網站建設10年,服務客戶1000+

彈框在一個很的長頁面居中顯示

2019-05-16


    說到這個問題,100%的前端工程師都遇到過。但是這個問題又是不太好形容,所以對此做解釋的人自然很少,這里,我要對這個問題,做一下解釋:

HTML:
<div class="arrow_mask"></div>
<div class="arrow-body">
    <div class="arrow-body-header">
        標題
    </div>
    <div  class="arrow-body-text">
       內容介紹
    </div>
 </div>

CSS:
.arrow_mask {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1600;
    background: #333333;
    opacity: 0.8;
}

.arrow-body{
    display: none;
    width: 82%;
    height: 362px;
    position: absolute;
    z-index: 1601;
    /* top: 80px; */
    background: #ffffff;
    border-radius: 8px;
    margin-left: 9%;
}
.arrow-body-header{
    height: 46px;
    line-height: 46px;
    color: #FFFFFF;
    background: #ee0a3b;
    text-align: center;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    font-size: 16px;
}
.arrow-body-text{
    font-size: 11px;
    color: #333;
}
.text-mes{
    margin-top: 10px;
    width: 100%;
    padding-right: 20px;
    padding-left: 20px;
}
.close img{
    width: 40px;
    height: 40px;
    position: absolute;
    left: 50%;
    margin-left: -20px;
    bottom: -20px;
}

JS:
window.onload = function (){
 var sightHeight =  window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 
   var top = (sightHeight-350)/2;
   $(".arrow-body").css({
        top:top+"px"
   });
   $(".close").click(function(){
       $(".arrow_mask").hide();
       $(".arrow-body").hide();
   });
}

JS的部分需要簡介一下,這里的原理是這樣的:
1-通過window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight 獲取當前頁面的可視高度;
2-然后在使用可視高度減去彈框的高度除以二的結果,作為彈框距離頂部的距離。這樣不管頁面實際高度多長,彈框時鐘會在頁面的中心。
3-但單擊關閉按鈕的時候,讓彈框隱藏

0
首頁
案例
關于
聯系
街机麻将玩法