js如何实现点击图片d出窗口并放大这张图片,d出的窗口有半透明遮罩层效果，d出的窗口不跳页面_IT百科

通过JS代码 document.getElementById('divID').style.etElementById('divID').style.display = 'none'。函数可以实现。

1、遮罩层：<div id="back"></div>，即作为背景层，覆盖整个页面。d出层：<div id="form"></div>，即背景层上的一层，此层可根据#form{top: 10%left: 10%width: 20%height: 30%}，调整d出层的d出位置。

2、d出察逗层和遮罩层全部为div标签，可以利用display来控制显示和隐藏的属性，在js中，显示： document.getElementById('divID').style.display = document.getElementById('divID').style.display = 'none'。

3、显示遮罩层高漏和d出层，即可用图中popDiv（）函数表示：其中，showId 表示d出层的divId, backId 表示遮罩层的divId；函数第去、2行显示d出层和遮罩，3、4、5行设置遮罩层的长度、宽度。

4、关闭d出层和遮罩层用hideDiv函数（），其败念卖中：showId 表示d出层的divId, backId 表示遮罩层的divId；先关闭d出层，后关闭遮罩层。

5、点击按钮后，d出，要给按钮加上onclick函数，<button onclick="popDiv('form','back')">点我，显示d出层</button>。

6、整体代码如下，css 样式可根据个人的喜好自行添加。

创建一个遮罩层，第一个参数为可选的回调函数（点击时触发）参数为事件对象和碰凳遮罩层节点，第二个参数为该遮罩层的层级（默认层级为笑森旅2000 ），默认事件为春肢移除遮罩层

TS版本

JS版本

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

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>

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

</body>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/bake/11984635.html

js如何实现点击图片d出窗口并放大这张图片,d出的窗口有半透明遮罩层效果，d出的窗口不跳页面

发表评论

评论列表（0条）