js如下:
<script language="javascript">
//登陆d出对话框,并使背景元素不可用
var div_width = 300;
var div_height = 200;
function showWindow(width,height){
locationhref="#";
width = div_width;
height = div_height
var windowstr= documentgetElementById("popLayer")innerHTML;
documentgetElementById("infoDiv")innerHTML=windowstr;
documentgetElementById("infoDiv")styleleft=((documentbodyclientWidth-width)>0(documentbodyclientWidth-width):0)/2+"px";
documentgetElementById("infoDiv")styletop=200+"px";
documentgetElementById("infoDiv")stylezIndex=10001;
documentgetElementById("infoDiv")stylewidth=width;
documentgetElementById("infoDiv")styleheight=height;
documentgetElementById("infoDiv")styleborder="3px solid #0099ff";
documentgetElementById("tranDiv")styleheight=documentbodyclientHeight+ "px";
documentgetElementById("tranDiv")stylewidth=documentbodyclientWidth+ "px";
documentgetElementById("tranDiv")styledisplay="";
documentgetElementById("tranDivBack")styledisplay="";
documentgetElementById("tranDivBack")stylezIndex=10000;
documentgetElementById("infoDiv")styledisplay="";
}
function closeWindow(){
documentgetElementById("tranDiv")styledisplay="none";
}
</script>
页面中:
<!--层遮罩部分-->
<div style="position:absolute;display:none; left:0px; top:0px;" id="tranDiv">
<div style="position:absolute;left:0px; top:0px; width:100%; height:100%;background-color:#000000;filter:alpha(Opacity=30)" id="tranDivBack"> </div>
<div align='center'style='position:absolute;left:0px; top:0px; width:100%; height:100%; background-color:#e5edf5;background-image:url(images/bestnetqywimg/tccbggif);' id='infoDiv'></div>
</div>
<!--层遮罩部分结束-->
<!--d出层登录-->
<div id="popLayer" style="display:none"><form id="formdl" name="formdl" method="post" action=""><br /><font align="center" color="#0000ff" size="3"><b>---手机号码先登录---</b></font><br /><br />
<br/>
<input type="submit" name="Submit" class="bntccanniu" value="登录" /> <input type="button" name="Submit1" class="bntccanniu" value="取消" onclick="closeWindow();"/>
</form>
</div>
<a href="javascript:;">点击此处看看</a>
有很多方法可以实现,基本原理是一样的。你的实现方法是这样的:遮罩部分2个层和登录的层一开始设置的属性为display:none,这是不可见的,点击那个超链接后,开始运行js代码,登录层的内容被复制到了遮罩部分的第二个层里面成为了新的登录层,并设置这个层为最上面,遮罩部分的第一个层设置在新登录层的下面,并设置成充满整个浏览器,背景黑色,透明度为30%,这样你看上去就是半透明的了,并且很大。原来的超链接层再最下面。因为半透明的层在原来超链接层的上面并且很大,所以用鼠标点击的时候只是点击在了半透明的层上面,并没有点击到超链接层上面。
js注释:
////下面 设置了一个空链接
locationhref="#";
//下面2行是赋值
width = div_width;
height = div_height
//下面 得到登录层也就是id为popLayer的层的内容
var windowstr= documentgetElementById("popLayer")innerHTML;
//下面 把登录层内容放到infoDiv层里,形成新的登陆层
documentgetElementById("infoDiv")innerHTML=windowstr;
//下面2行设置新登录层的位置
documentgetElementById("infoDiv")styleleft=((documentbodyclientWidth-width)>0(documentbodyclientWidth-width):0)/2+"px";
documentgetElementById("infoDiv")styletop=200+"px";
//下面设置新登录层的zIndex值,这个值越大显示的时候就越在上面
documentgetElementById("infoDiv")stylezIndex=10001;
//下面2行设置新登录层的宽和高
documentgetElementById("infoDiv")stylewidth=width;
documentgetElementById("infoDiv")styleheight=height;
//设置新登录层边框
documentgetElementById("infoDiv")styleborder="3px solid #0099ff";
//tranDiv层里面包含了2个层 一个是半透明的遮罩层tranDiv,另一个是新的登录层infoDiv。可以把它看做一个容器。下面2行设置它的高和宽为网页内容可视区域的高度和宽度,这样这个层就充满整个浏览器了
documentgetElementById("tranDiv")styleheight=documentbodyclientHeight+ "px";
documentgetElementById("tranDiv")stylewidth=documentbodyclientWidth+ "px";
//下面 设置这个容器层为可见
documentgetElementById("tranDiv")styledisplay="";
//tranDiv就是那个半透明的遮罩层,现在也设置为可见
documentgetElementById("tranDivBack")styledisplay="";
//下面 设置zindex值为10000,这个值比新登录层少1,表明在新登录层的下面
//documentgetElementById("tranDivBack")stylezIndex=10000;
//下面 设置新登录成为可见
//documentgetElementById("infoDiv")styledisplay="";
<!--层遮罩部分-->
下面这个就是容器层,它的左上角位于浏览器的0,0位置就是浏览器的左上角,高度宽度在js里设置
<div style="position:absolute;display:none; left:0px; top:0px;" id="tranDiv">
下面这个是遮罩层 它位于容器层的0,0位置,宽度和高度都是100%,就是他的大小和位置和容器层一样,都是整个网页那么大。下面的filter用的是滤镜,他设置的是半透明,Opacity=30 半透明度30%,#000000是黑色,这样看起来就是黑色半透明的一个大层了
<div style="position:absolute;left:0px; top:0px; width:100%; height:100%;background-color:#000000;filter:alpha(Opacity=30);" id="tranDivBack"> </div>
下面是新的登陆层,位置和高度在这里写了,但是运行js的时候会对其进行重新设置
<div align='center'style='position:absolute;left:0px; top:0px; width:100%; height:100%; background-color:#e5edf5;background-image:url(images/bestnetqywimg/tccbggif);' id='infoDiv'></div>
</div>
<!--层遮罩部分结束-->
用的 jquery
(function() { // 页面加载触发此函数
var po = documentcreateElement('script'); potype = 'text/javascript";
// DOM 定义 创建一个script 对象 赋值为 po , 给创建的对象 script 赋予属性 type 为 test/javascript
以上就是关于如何jsd出div全部的内容,包括:如何jsd出div、JS代码注释`(div 层遮罩/d出框)、这些代码什么意思 (function() { var po = document.createElement('script'); po.type = 'text/javascript等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)