JS 创建遮罩层，实现以下功能，求大神帮助，谢谢！

JavaScript013

JS 创建遮罩层，实现以下功能，求大神帮助，谢谢！,第1张

你自己再把样式改改吧，就可以了。

<script>

var docEle = function() {

return document.getElementById(arguments[0]) || false

}

function openNewDiv(_id) {

var m = "mask"

if (docEle(_id)) document.removeChild(docEle(_id))

if (docEle(m)) document.removeChild(docEle(m))

// 新激活图层

var newDiv = document.createElement("div")

newDiv.id = _id

newDiv.style.position = "absolute"

newDiv.style.zIndex = "9999"

newDiv.style.width = "300px"

newDiv.style.height = "300px"

newDiv.style.top = "100px"

newDiv.style.left = (parseInt(document.body.scrollWidth) - 300) / 2 + "px"// 屏幕居中

newDiv.style.background = "#EFEFEF"

newDiv.style.border = "1px solid #860001"

newDiv.style.padding = "5px"

newDiv.innerHTML = "id:luckystar <select><option value='1'>aaaaaaaaa</option><option value='2'>bbbb</option><option value='c'>ccccccccc</option></select><br><br><br><br><br><br><br>"

document.body.appendChild(newDiv)

// mask图层

var newMask = document.createElement("div")

newMask.id = m

newMask.style.position = "absolute"

newMask.style.zIndex = "1"

newMask.style.width = document.body.scrollWidth + "px"

newMask.style.height = document.body.scrollHeight + "px"

newMask.style.top = "0px"

newMask.style.left = "0px"

newMask.style.background = "#000"

newMask.style.filter = "alpha(opacity=40)"

newMask.style.opacity = "0.40"

document.body.appendChild(newMask)

// 跳转到其他页面

var otherPage = document.createElement("button")

otherPage.onclick=function() {

window.open("http://www.baidu.com")

}

otherPage.value = '跳转'

// 关闭mask和新图层

var newA = document.createElement("button")

//newA.href = "#"

newA.value = "关闭激活层"

newA.onclick = function() {

document.body.removeChild(docEle(_id))

document.body.removeChild(docEle(m))

return false

}

newDiv.appendChild(newA)

newDiv.appendChild(otherPage)

}

</script>

<body>

<a href="#" _fcksavedurl="#" onclick="openNewDiv('newDiv')return false">激活新层</a>

<p>网页内容网页内容网页内容</p>

<p>网页内容网页内容网页内容</p>

<p>网页内容网页内容网页内容</p>

<p>网页内容网页内容网页内容</p>

<p>网页内容网页内容网页内容</p>

<p>网页内容网页内容网页内容</p>

<p>网页内容网页内容网页内容</p>

<p>网页内容网页内容网页内容</p>

<p>网页内容网页内容网页内容</p>

<p>网页内容网页内容网页内容</p>

<p>网页内容网页内容网页内容</p>

<p>网页内容网页内容网页内容</p>

<p>网页内容网页内容网页内容</p>

<p>网页内容网页内容网页内容</p>

<p>网页内容网页内容网页内容</p>

<p>网页内容网页内容网页内容</p>

<p>网页内容网页内容网页内容</p>

<p>网页内容网页内容网页内容</p>

</body>

就放一个遮罩就行了。数据加载完成里面将遮罩隐藏

如

<style type="text/css">

    #loading{position:fixedtop:0left:0width:100%height:100%background:rgba(0,0,0,0.7)z-index:15000}

    #loading img{position:absolutetop:50%left:50%width:33pxheight:33pxmargin-top:-15pxmargin-left:-15px}

</style>

<div id="loading">

<img src="images/loading.gif" width="33" alt="">

</div>

数据加载完成后，$('#loading').hide()就可以了。