全屏弹出div提示框通用javascript-设计家园

首页

设计软件
当前位置：首页->

全屏弹出div提示框通用javascript

全屏弹出div提示框通用javascript

信息来源:网络栏目类别: 网页设计浏览次数: 发表评论

减小字体

增大字体

代码如下：

样式：

body{margin:0;padding:0;}
.popupdiv{text-align:left;display:block; position:absolute; top:50%; left:50%;z-index:999; }
#popupbg,.popupifra{ background:#000; width:100%; position:absolute; top:0; left:0; z-index:998;opacity:0.3;filter:Alpha(opacity=30);}
.popupifra{display:block; border:none; background:none; z-index:997; background-color:transparency;filter:Alpha(opacity=0);}
.hidden { display:none;}
.show { display:block;}

Javascript:

// author:ycsy520
// version:0.1.2
// date:2008/07/12

function addLoadEvent(func){var oldonload = window.onload;if(typeof window.onload != 'function'){window.onload = func;}else{window.onload = function(){oldonload();func();}}}

addLoadEvent(POPUP.getH);

用法：

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出框提示方法</title>
<link href="../style/popUpWin.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="../scripts/popupdiv.js"></script>
</head>
<body>
<div id="bigFram" class="hidden">
<div style="height:2200px; width:900px; background:#fff; border:2px solid #ccc; "> <span style="display:block; line-height:30px; text-align:right; padding-right:10px; background:#f1f1f1;"> <a href="#" onclick="POPUP.cw('bigFram');">关闭</a> </span>
    <select>
      <option>---------------------------------</option>
    </select>
</div>
</div>
<div id="errorFram" class="hidden">
<div style="height:120px; width:300px; background:#fff; border:2px solid #ccc; "> <span style="display:block; line-height:30px; text-align:right; padding-right:10px; background:#f1f1f1;"> <a href="#" onclick="POPUP.cw('errorFram');">关闭</a> </span> </div>
</div>
<div id='table' class="hidden">
<table width="200" border="1" bgcolor="#FFFFFF">
    <tr>
      <td> 1</td>
      <td> 2</td>
      <td><a href="#" onclick="POPUP.cw('table')">关闭</a></td>
    </tr>
    <tr>
      <td> 4</td>
      <td> 5</td>
      <td> 6</td>
    </tr>
    <tr>
      <td> 7</td>
      <td> 8</td>
      <td> 9</td>
    </tr>
</table>
</div>
<div id="pic" class="hidden">
<div style="text-align:right; background:#fff"><a href="#" onclick="POPUP.cw('pic');">close</a></div>
<img style="padding:2px; background:#fff;" src="http://hiphotos.baidu.com/ycsy520/abpic/item/dde5211ff577a0dca6866919.jpg" /> </div>
<div style="text-align:left; line-height:30px; margin-left:150px;">
<div style="line-height:40px; font-weight:800;"> <strong style="color:#ff3c00; font-size:14px;">点击弹出相应提示：</strong><br />
    <a href="#" onclick="POPUP.pw('errorFram');">错误提示</a><br />
    <a href="#" onclick="POPUP.pw('bigFram');">比较大的弹出提示</a> <br />
    <a href="#" onclick="POPUP.pw('table');">表格</a><br />
    <a href="#" onclick="POPUP.pw('pic');">图片</a>(当然，图片要控制下大小) </div>
<select>
    <option>--------------------------</option>
</select>
</div>
</body>
</htm>

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

注释：
getH:function()
这个是取页面的高度，因为各个浏览器对页面的innerHeight,clientHeight等等xxxHeight的解析不一样，有关详细资料可以问百度。这个函数是直接从thickbox里面copy过来的。

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

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

cifr:function()
生成一个iframe。

insertAfter:function(nEl,tEl)
这个函数是把新的标签插到某某标签的后面，在javascript里面有insertBefore但是没有insertAfter所以就写了个函数，这个函数好像是Jeremy Keith写的，我不太确定，在书DOM Scripting（Javascript DOM 编程艺术）里面有.

hasSlt:function()
判断页面是否有select

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

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

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

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

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

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

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

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

改下：

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

    cw:function(el){
    document.body.removeChild(pwb);
    document.getElementById(el).className = "hidden";
    if(POPUP.hasSlt()){document.body.removeChild(ifr);}
    }

本文标签：javascript 【把本文收藏到网摘博采百度】其它收藏服务：

上一篇:JavaScript循环DIV显示/隐藏效果回网页设计列表下一篇:指定DIV内容自由改变字体大小

更新

推荐

热门