JQuery遮罩層

時間 2020-01-20

標籤 jquery 欄目 JQuery 简体版

原文原文鏈接

<!DOCTYPE html> javascript

<html> css

<head> html

<title>測試</title> java

.mask { 測試

position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777; ui

z-index: 1002; left: 0px; htm

opacity:0.5; -moz-opacity:0.5; blog

}

.model{

position: absolute; z-index: 1003; text-align: center;

width:320px; height:320px; text-align:center;

background-color:#0066FF; display: none;

}

.div_center{ width: 480px; margin: 0 auto;}

</style>

//兼容火狐、IE8

function showMask(){

$("#mask").css("height",$(document).height());

$("#mask").css("width",$(document).width());

$("#mask").show();

}

//讓指定的DIV始終顯示在屏幕正中間

function letDivCenter(divName){

var top = ($(window).height() - $(divName).height())/2;

var left = ($(window).width() - $(divName).width())/2;

var scrollTop = $(document).scrollTop();

var scrollLeft = $(document).scrollLeft();

$(divName).css( { position : 'absolute', 'top' : top + scrollTop, left : left + scrollLeft } ).show();

$('#close').click(function(){

$(divName).css( { position : 'absolute', 'top' : top + scrollTop, left : left + scrollLeft }).hide();

$('#mask').hide();

});

}

function showAll(divName){

showMask();

letDivCenter(divName);

}

</script>

</head>

<body>

<a href="javascript:void (0);" onclick="showAll('#model')">點我彈出遮罩層</a><br />

</div>

</body>

</html>

本文參考自：http://xutao5641745.iteye.com/blog/1310985

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。