杭州设计公司,杭州广告设计公司
网页设计
全屏弹出div提示框通用javascript
信息来源:网络     栏目类别: 网页设计     浏览次数:     发表评论 减小字体 增大字体
代码如下:

样式:

body{margi**:0;paddi**g:0;}
.popupdiv{text-alig**:left;display:block; positio**:absolute; top:50%; left:50%;z-i**dex:999; }
#popupbg,.popupifra{ backgrou**d:#000; width:100%; positio**:absolute; top:0; left:0; z-i**dex:998;opacity:0.3;filter:Alpha(opacity=30);}
.popupifra{display:block; border:**o**e; backgrou**d:**o**e; z-i**dex:997; backgrou**d-color:tra**spare**cy;filter:Alpha(opacity=0);}
.hidde** { display:**o**e;}
.show { display:block;}

Javascript:

// author:ycsy520
// versio**:0.1.2
// date:2008/07/12

var POPUP = {
&**bsp;&**bsp;&**bsp; getH:fu**ctio**(){
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; if (wi**dow.i****erHeight && wi**dow.scrollMaxY) {
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; yScroll = wi**dow.i****erHeight + wi**dow.scrollMaxY;
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; } else if (docume**t.body.scrollHeight > docume**t.body.offsetHeight){
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; yScroll = docume**t.body.scrollHeight;
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; } else {yScroll = docume**t.body.offsetHeight;}
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; retur** yScroll;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;
&**bsp;&**bsp;&**bsp; },
&**bsp;&**bsp;&**bsp; pw:fu**ctio**(el){
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; if(!docume**t.getEleme**tById(el)){retur** false;}
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; if(!docume**t.createEleme**t){retur** false;}
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; POPUP.cpw(el);
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; if(POPUP.hasSlt()){POPUP.cifr();}
&**bsp;&**bsp;&**bsp; },
&**bsp;&**bsp;&**bsp; cpw:fu**ctio**(el){
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; el= docume**t.getEleme**tById(el);&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; el.className = "popupdiv";
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; el.style.margi**Left = "-" + el.clie**tWidth/2 + "px";
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; pwb = docume**t.createEleme**t('div');
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; pwb.setAttribute('id','popupbg');
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; ph =el.clie**tHeight;
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; sh = (wi**dow.i****erHeight) ? wi**dow.i****erHeight : (docume**t.docume**tEleme**t && docume**t.docume**tEleme**t.clie**tHeight) ? docume**t.docume**tEleme**t.clie**tHeight : docume**t.body.offsetHeight;
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; bh = POPUP.getH();
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; if(ph>bh){
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; el.style.margi**Top = "-180px";
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; pwb.style.height = ph+180+"px";
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; }else{
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; if(ph>sh){
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; pwb.style.height = bh>ph?bh+'px':ph+'px';
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; el.style.margi**Top = '-180px';
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; }else{&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; el.style.margi**Top = "-" + ph/2 + 'px';
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; pwb.style.height = sh>bh?sh+'px':bh+'px';
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; }&**bsp;&**bsp;
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; }
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; retur** docume**t.body.appe**dChild(pwb);
&**bsp;&**bsp;&**bsp; },
&**bsp;&**bsp;&**bsp; cifr:fu**ctio**(){
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; if(!docume**t.createEleme**t("iframe")){retur** false;};
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; ifr = docume**t.createEleme**t("iframe");
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; ifr.setAttribute("id","divshim");
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; ifr.setAttribute("src","javascript:void(0);");
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; ifr.setAttribute("scrolli**g","**o");
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; ifr.setAttribute("frameborder","0");
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; ifr.setAttribute("allowtra**spare**cy","true");
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; POPUP.i**sertAfter(ifr,pwb);
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; ifr.className = "popupifra";
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; ifr.style.height = pwb.style.height;
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; ifr.style.width = pwb.style.width;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;
&**bsp;&**bsp;&**bsp; },
&**bsp;&**bsp;&**bsp; i**sertAfter:fu**ctio**(**El,tEl) {
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; var p = tEl.pare**tNode;if (p.lastChild == tEl) {p.appe**dChild(**El);
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; } else {p.i**sertBefore(**El,tEl.**extSibli**g); }
&**bsp;&**bsp;&**bsp; },
&**bsp;&**bsp;&**bsp; hasSlt:fu**ctio**(){
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; var a = docume**t.getEleme**tsByTagName('*');
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; var hasSlt = false;
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; for(var i=a.le**gth-1;i>=0;i--){
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; if(a[i].**odeName == 'SELECT'){hasSlt = true;break;}
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; }
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; retur** hasSlt;
&**bsp;&**bsp;&**bsp; },
&**bsp;&**bsp;&**bsp; attr:fu**ctio**(el,**ame,value){
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; if(!**ame || **ame.co**structor != Stri**g){retur** '';}
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; **ame = {'for':'htmlFor','class':'className'}[**ame] || **ame;
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; if(typeof value != 'u**defi**ed'){
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; el[**ame] = value;
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; if(el.setAttribute){el.setAttribute(**ame,value);}
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; retur** el[**ame] || el.getAttribute(**ame) || '';
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; }
&**bsp;&**bsp;&**bsp; },
&**bsp;&**bsp;&**bsp; cw:fu**ctio**(el){
&**bsp;&**bsp;&**bsp; pwb.className = "hidde**";
&**bsp;&**bsp;&**bsp; docume**t.getEleme**tById(el).className = "hidde**";&**bsp;&**bsp;
&**bsp;&**bsp;&**bsp; if(POPUP.hasSlt()){ifr.className="hidde**"}
&**bsp;&**bsp;&**bsp; }
}

fu**ctio** addLoadEve**t(fu**c){var oldo**load = wi**dow.o**load;if(typeof wi**dow.o**load != 'fu**ctio**'){wi**dow.o**load = fu**c;}else{wi**dow.o**load = fu**ctio**(){oldo**load();fu**c();}}}

addLoadEve**t(POPUP.getH);


用法:


<html >
<head>
<meta http-equiv="Co**te**t-Type" co**te**t="text/html; charset=utf-8" />
<title>弹出框提示方法</title>
<li**k href="../style/popUpWi**.css" rel="stylesheet" type="text/css" />
<script la**guage="JavaScript" type="text/javascript" src="../scripts/popupdiv.js"></script>
</head>
<body>
<div id="bigFram" class="hidde**">
<div style="height:2200px; width:900px; backgrou**d:#fff; border:2px solid #ccc; "> <spa** style="display:block; li**e-height:30px; text-alig**:right; paddi**g-right:10px; backgrou**d:#f1f1f1;"> <a href="#" o**click="POPUP.cw('bigFram');">关闭</a> </spa**>
&**bsp;&**bsp;&**bsp; <select>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; <optio**>---------------------------------</optio**>
&**bsp;&**bsp;&**bsp; </select>
</div>
</div>
<div id="errorFram" class="hidde**">
<div style="height:120px; width:300px; backgrou**d:#fff; border:2px solid #ccc; "> <spa** style="display:block; li**e-height:30px; text-alig**:right; paddi**g-right:10px; backgrou**d:#f1f1f1;"> <a href="#" o**click="POPUP.cw('errorFram');">关闭</a> </spa**> </div>
</div>
<div id='table' class="hidde**">
<table width="200" border="1" bgcolor="#FFFFFF">
&**bsp;&**bsp;&**bsp; <tr>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; <td>&**bsp;1</td>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; <td>&**bsp;2</td>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; <td><a href="#" o**click="POPUP.cw('table')">关闭</a></td>
&**bsp;&**bsp;&**bsp; </tr>
&**bsp;&**bsp;&**bsp; <tr>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; <td>&**bsp;4</td>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; <td>&**bsp;5</td>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; <td>&**bsp;6</td>
&**bsp;&**bsp;&**bsp; </tr>
&**bsp;&**bsp;&**bsp; <tr>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; <td>&**bsp;7</td>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; <td>&**bsp;8</td>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp; <td>&**bsp;9</td>
&**bsp;&**bsp;&**bsp; </tr>
</table>
</div>
<div id="pic" class="hidde**">
<div style="text-alig**:right; backgrou**d:#fff"><a href="#" o**click="POPUP.cw('pic');">close</a></div>
<img style="paddi**g:2px; backgrou**d:#fff;" src="http://hiphotos.baidu.com/ycsy520/abpic/item/dde5211ff577a0dca6866919.jpg" /> </div>
<div style="text-alig**:left; li**e-height:30px; margi**-left:150px;">
<div style="li**e-height:40px; fo**t-weight:800;"> <stro**g style="color:#ff3c00; fo**t-size:14px;">点击弹出相应提示:</stro**g><br />
&**bsp;&**bsp;&**bsp; <a href="#" o**click="POPUP.pw('errorFram');">错误提示</a><br />
&**bsp;&**bsp;&**bsp; <a href="#" o**click="POPUP.pw('bigFram');">比较大的弹出提示</a> <br />
&**bsp;&**bsp;&**bsp; <a href="#" o**click="POPUP.pw('table');">表格</a><br />
&**bsp;&**bsp;&**bsp; <a href="#" o**click="POPUP.pw('pic');">图片</a>(当然,图片要控制下大小) </div>
<select>
&**bsp;&**bsp;&**bsp; <optio**>--------------------------</optio**>
</select>
</div>
</body>
</htm>

当然,你如果你弄下来玩玩的话,可以把javascrip,css和html copy到同一个文件里面,我这里是把
样式放在style文件夹里面,脚本是在scripts里面,而html则在web文件夹里面。

注释:
getH:fu**ctio**()
这个是取页面的**度,因为各个浏览器对页面的i****erHeight,clie**tHeight等等xxxHeight的解析不一样,有关详细资料可以问百度。这个函数是直接从thickbox里面copy过来的。

pw:fu**ctio**(el)
参数el是你要“弹出”的box的id,这个pw(popup wi**dow)也就是“弹出”box,另,这里有个判断,if(POPUP.hasSlt()){POPUP.cifr();},判断页面里面是否有 select,如果有,则“弹出”的时候在生成一个iframe覆盖在页面上以“遮”住select。

cpw:fu**ctio**(el)
生成一个div,也就是那个背景,灰色的那个,而那个iframe就生成在这个div的“下面”。并且判断页面**度,浏览器可视**度和“弹出”div的**度,如果弹出的div**度大于页面**度和浏览器**度,则把它margi**Top = "-180px";如果是小于,则把弹出的div固定在页面中间。具体可以看代码,本来想如果如果弹出的div**度很大的话,搞滚动条的,但是觉得麻烦,如果有兴趣的话可以**己去改改。

cifr:fu**ctio**()
生成一个iframe。

i**sertAfter:fu**ctio**(**El,tEl)
这个函数是把新的标签插到某某标签的后面,在javascript里面有i**sertBefore但是没有i**sertAfter所以就写了个函数,这个函数好像是Jeremy Keith写的,我不太确定,在书DOM Scripti**g(Javascript DOM 编程艺术)里面有.

hasSlt:fu**ctio**()
判断页面是否有select

attr:fu**ctio**
这个函数用来设置和获取元素特性的值。是大名鼎鼎的Joh** Resig也就是jQuery之父写的,在他的书Pro Javascript Tech**iques(这本书写的比较专业,不建议初学者看,如果你是jQuery的使用者的话,这本书就非看不可了)里面有详解。

cw:fu**ctio**(el)
关闭,也就是把”弹出“的东西display:**o**e;比较低级的方法。想过用remove,但终究没去改。


addLoadEve**t(fu**c)
本来不想用这个函数的,但是考虑到如果页面很大,而且在页面没有载入之前就点击”弹出“div的话,应该会出问题的。所以,还是+上了。
这个函数也就是wi**dow.o**load,不过,如果你用wi**dow.o**load的话,在如果,你写了一个wi**dow.o**load = xxx;
而另一个人也写了wi**dow.o**load = yyy;并且写在你的wi**dow.o**load = xxx后面,那么你写的那个wi**dow.o**load = xxx是不会运行的。而addLoadEve**t(fu**c)不会这样。这个函数好像也是Jeremy Keith写的,在书DOM Scripti**g(Javascript DOM 编程艺术)里面有详解.


后记:
这个javascirpt只是用来”弹出“一些信息,如果你想用这种形式来搞图片展示的话,建议用thickbox或其他。
而且,这个javascirpt不能用在iframe或有框架的页面里面,如果要用的话,要改下代码,也就是取bh,sh的值要取父页面的,搞个判断,判断是否在iframe或框架里面,如果是,那么取这些值得时候要加个pare**t.

本来想搞个弹出的东西可以拖动的,但是觉得,如果这样,不但别人用的麻烦,而且我写的页面麻烦,会越搞越复杂,还是简单点好。在者,如果你想这个效果要像百度那样的话,也可以,改下样式,把背景弄白点,在写一个函数,创建一个div在”弹出“的div的”下面“(z-i**dex,positio**),位置比 ”弹出“的div上面和左边差几个像素而且,在写一个类,设置一下样式就ok了。

这里是简单的封装了下,没有完全采用oop的写法,感觉没必要。

如果你觉得这个javascript哪里不妥或不爽的地方,大家可以探讨下。玩玩而且。

//////////////////////////////////////

改下:

关于关闭,这里单纯的“关闭”是display:**o**e,如果点击多次的话,会生成很多<div class="hidde**"></div>等等。所以干脆点击关闭的时候,把灰色背景和那个iframe删除。如下:

&**bsp;&**bsp;&**bsp; cw:fu**ctio**(el){
&**bsp;&**bsp;&**bsp; docume**t.body.removeChild(pwb);
&**bsp;&**bsp;&**bsp; docume**t.getEleme**tById(el).className = "hidde**";
&**bsp;&**bsp;&**bsp; if(POPUP.hasSlt()){docume**t.body.removeChild(ifr);}
&**bsp;&**bsp;&**bsp; }

本文标签:javascript把本文收藏到 网摘 博采 百度
上一篇:JavaScript循环DIV显示/隐藏效果          回网页设计列表         下一篇:指定DIV内容自由改变字体大小
搜索本站其他内容: 百度一下:[全屏弹出div提示框通用javascript]   Google搜索:[全屏弹出div提示框通用javascript]
最新网友评论文章↓
1.靠2009-11-19 20:42:45
2.去2009-11-19 20:39:41
3.脑残还是变相炫富?2009-11-16 20:17:58
4.好感动哦2009-11-7 15:40:32
5.怎么学习2009-10-20 10:54:50

文章添加时间:2008-10-14,文件大小:20.35 KB,最近更新时间:2011-12-16 18:09:03 返回TOP↑            

本站文章搜集自网络;共享网络,共享快乐,我为人人,人人为我;如果您知道本站未知来源文章请告知本站谢谢!
文中及留言观点不代表本站;本站转载内容只是为了更好的交流;
若侵犯了您的版权请联系E-mail:有事儿,您Q我!,本站核实后立即处理!

  •             平面设计| 标志设计| 包装设计| 网页设计| 广告设计| VI设计| 画册设计| 专卖店设计| 展位设计| 名片设计| 网站地图|    建议使用IE5及以上1024*768分辨率
  •             友情链接 版权所有 © 杭州威迪广告公司 2008-2010 | TEL:0571-88385993 13296756810 浙ICP备09011107号