屏幕的遮挡层，js得到屏幕宽高、页面宽高 (window.screen.availHeight)等--

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