<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidthdocument.MM_pgH=innerHeightonresize=MM_reloadPage}}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload()
}
MM_reloadPage(true)
//-->
</script>
2、建立DIV
3、加入层代码，id为层的标签id，如下：
<div id="Layer1" style="position:absolutewidth:200pxheight:140pxz-index:1"><img src="pic/2.jpg" width="233" height="175"></div>
<style>.mark{
position:fixed
left:0
top:0
opacity:.5
width:100%
height:100%
background:#000
z-index:998
}
.content{
position:absolute
z-index:999
}
</style>
<!--↓遮罩-->
<div class="mark">
<div class="content">红框div</div>
</div>
1、利用js代码首先创建一个div，document.createElement('div')
2、确认div添加位置，可以在某个dom元素后面，或者通过css属性控制具体位置，主要通过left/top等属性控制。
3、确定位置之后，显示div即可。
示例：比如html中有一个文本输入框，我们现在需要在挨着输入框右下角位置显示一个div。
<input type="text" id="city" value="beijing"/>
方法：
function createDiv(){//首先创建div
var descDiv = document.createElement('div')
document.body.appendChild(descDiv)
//获取输入框dom元素
var text = document.getElementById('city')
//计算div的确切位置
var seatX = text.offsetLeft + text.offsetWidth//横坐标
var seatY = text.offsetTop + text.offsetHeight//纵坐标
//给div设置样式，比如大小、位置
var cssStr = "z-index:5width:420pxheight:300pxbackground-color:#FFFF99border:1px solid blackposition:absoluteleft:"
+ seatX + 'pxtop:' + seatY + 'px'
//将样式添加到div上，显示div
descDiv.style.cssText = cssStr
descDiv.innerHTML = '这是一个测试的div显示的内容'
descDiv.id = 'descDiv'
descDiv.style.display = 'block'
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）