window.screen.availWidth 返回當前屏幕寬度(空白空間) ------當手機有輸入法的時候，要注意................
window.screen.availHeight 返回當前屏幕高度(空白空間)?
window.screen.width 返回當前屏幕寬度(分辨率值)?
window.screen.height 返回當前屏幕高度(分辨率值)?
window.document.body.offsetHeight; 返回當前網頁高度?
window.document.body.offsetWidth; 返回當前網頁寬度

?HTML部分：

<div class="successFrame" style="height: 984px; display: none;"></div>
<div class="success" style="left: 741.5px; top: 402px; display: none;">
<div class="successCption">手機號碼已存在!</div>
<div class="successBtn">OK</div>
</div>

CSS部分

.successFrame{
width: 100%;
height: 100%;
z-index: 998;
position: fixed;
background-color: #313131;
opacity: 0.8;
display: none;
}

.success{
width: 300px;
border-radius: 12px;
left: 300px;
top: 400px;
height: 140px;
background-color: #ffffff;
z-index: 999;
position: fixed;
color: #313131;
display: none;
}

.successCption{
width: 100%;
height: 80px;
text-align: center;
line-height: 80px;
font-size: 16px;
border-bottom: 1px solid #dad8d8;
font-weight: bold;
}

.successBtn{
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
font-size: 18px;
cursor: pointer;
}

JS部分：

function showSuccessBtn(text){
var bodyHeight1 = window.screen.availHeight;
var windowWidth = $(window).width();
var windowHeight = $(window).height();
alert(windowHeight);

var success = $(".success");
var successFrame = $(".successFrame");

$(".successCption").text(text);

successFrame.css("height", bodyHeight1 + "px");
success.css("left", windowWidth / 2 - success.width() / 2 + "px");
success.css("top", bodyHeight1 / 2 - success.height() / 2-60 + "px");
successFrame.show();
success.show();

$(".successBtn").click(function(){
$(".success").hide();
$(".successFrame").hide();
});
}

轉載于:https://www.cnblogs.com/hulaoxi/p/7382179.html

總結

以上是生活随笔為你收集整理的屏幕的遮挡层，js得到屏幕宽高、页面宽高 (window.screen.availHeight)等--的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。