<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>
</body>
遮罩层的CSS #mask { position: fixedleft: 0right: 0top: 0bottom: 0background: rgba(0, 0, 0, .3)z-index: 99999}在传统浏览器中，不支持rgba的写法。就放一个遮罩就行了。数据加载完成里面将遮罩隐藏
如
<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()就可以了。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）