简便的弹出窗口特效

时间：2013-05-09 11:43 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,codesocang.com,www.codesocang.com,站长特效 网" />
<meta name="description" content="www.codesocang.com,源码搜藏网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在源码搜藏网" />
<title>网页特效 兼容各种浏览器且使用简便的弹出窗口 源码搜藏网</title>
<style type="text/css">
body{margin:0px;padding:0px}
input{margin:5px;padding:0px;border:1px solid #000;}
</style>
<script type="text/javascript">
    var MyWin = new Win();
    var imgfile = "http://www.codesocang.com/img/1/"; //设置图片路径，相对或绝对都行
    var imgname = new Array();
    var img = new Array();
    //预先加载图片
    imgname[0] = imgfile + "clo.gif";
    imgname[1] = imgfile + "b1.png";
    imgname[2] = imgfile + "l1.png";
    imgname[3] = imgfile + "l2.png";
    imgname[4] = imgfile + "r1.png";
    imgname[5] = imgfile + "r2.png";
    imgname[6] = imgfile + "t1.png";
    imgname[7] = imgfile + "t2.png";
    imgname[8] = imgfile + "t3.png";
    //预读图片
    for (i = 0; i <= imgname.length - 1; i++)
    {
        img[i] = new Image();
        img[i].src = imgname[i];
    } //欢迎来到源码搜藏网，b我们的网址是www.codesocang.com，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
    var zIndex = 0;
    var Winid = 0;
    var Ie = /msie/i.test(navigator.userAgent);
    function $(Id) { return (document.getElementById(Id)) }
    function Win()
    {//欢迎来c到源码搜藏网，我们的网址是www.codesocang.com，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
        this.Create = function (mask, title, wbody, w, h, l, t)
        {
            Winid++;
            mask = mask;
            title = title || "源码搜藏网－加载中…";
            wbody = wbody || " <p align='center'>正在载入…</p>";
            w = w || 350;
            h = h || 150;
            cw = document.documentElement.clientWidth;
            ch = document.documentElement.clientHeight;
            sw = document.documentElement.scrollWidth;
            sh = document.documentElement.scrollHeight;
            st = (document.documentElement.scrollTop || document.body.scrollTop);
            if (w > cw)
                ww = 0;
            else
                ww = (cw - w) / 2;
            if (h > ch)
                hh = 0;
            else
                hh = (st + (ch - h) / 2);
            l = l || ww;
            t = t || hh;
            if (mask != "no")
            {
                var ndiv = document.createElement("DIV");
                ndiv.setAttribute("id", "ndiv" + Winid);
                ndiv.style.cssText = "width:" + sw + "px;height:" + sh + "px;left:0px;top:0px;position:absolute;overflow:hidden;background:#fff;filter:alpha(opacity=20); opacity:0.2;-moz-opacity:0.2;";
                document.body.appendChild(ndiv);
                if (Ie)
                {
                    var niframe = document.createElement("iframe");
                    niframe.style.width = sw;
                    niframe.style.height = sh;
                    niframe.style.top = "0px";
                    niframe.style.left = "0px";
                    niframe.style.visibility = "inherit";
                    niframe.style.filter = "alpha(opacity=0)";
                    niframe.style.position = "absolute";
                    niframe.style.zIndex = -1;
                    ndiv.insertAdjacentElement("afterBegin", niframe);
                }
            }
            var mywin = document.createElement("DIV");
            mywin.setAttribute("id", "win" + Winid);
            mywin.style.cssText = "width:" + w + "px;height:" + h + "px;left:0px;top:0px;position:absolute;overflow:hidden;padding:0px;font-family:Arial, 宋体";
            mywin.style.zIndex = ++zIndex;
            document.body.appendChild(mywin);
            var mytie = document.createElement("DIV");
            var myboy = document.createElement("DIV");
            var mybom = document.createElement("DIV");
            mytie.style.cssText = "overflow:hidden;height:30px;font-weight:bold;font-size:14px;width:100%";
            myboy.style.cssText = "overflow:hidden;width:100%";
            mybom.style.cssText = "overflow:hidden;height:30px;width:100%";
            mywin.appendChild(mytie);
            mywin.appendChild(myboy);
            mywin.appendChild(mybom);
            var wintag = [[mytie, 30, 15, "t1"], [mytie, 30, w - 30, "t2"], [mytie, 30, 15, "t3"], [myboy, h - 45, 15, "l1"], [myboy, h - 47, w - 32], [myboy, h - 45, 15, "r1"], [mybom, 15, 15, "l2"], [mybom, 15, w - 30, "b1"], [mybom, 15, 15, "r2"]];
            for (var i = 0; i < 9; i++)
            {
                var temp = document.createElement("DIV");
                temp.setAttribute("Fid", "win" + Winid);
                wintag[i][0].appendChild(temp);
                if (wintag[i][3])
                {
                    temp.style.cssText = "float:left;height:" + wintag[i][1] + "px;width:" + wintag[i][2] + "px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + imgfile + "" + wintag[i][3] + ".png', sizingMethod='scale');background:url('" + imgfile + "" + wintag[i][3] + ".png') !important;background:;";
                }
                else
                {
                    temp.style.cssText = "float:left;filter:alpha(Opacity=95,style=0);opacity:0.95;height:" + wintag[i][1] + "px;width:" + wintag[i][2] + "px;background:#f7f7f7;border:1px solid #666;overflow:hidden;padding:0px";
                }
            }
            mytie.childNodes[1].innerHTML = "<div style=\"position:absolute;overflow:hidden;height:15px;top:12px;padding-left:4px;padding-right:4px;\"></div><div style=\"position:absolute;background:url('" + imgfile + "clo.gif');overflow:hidden;width:43px;height:17px;top:7px !important;right:15px\" title=\"关闭窗口\" onclick=\"MyWin.Close('win" + Winid + "',10); MyWin.ndiv('ndiv" + Winid + "',10);\"></div>";
            this.Title("win" + Winid, title);
            this.Body("win" + Winid, wbody);
            this.Move_e("win" + Winid, l, t, 0, 0);
            return (mywin);
        }
        this.Title = function (Id, title)
        {
            if (Id == null) return;
            var o = $(Id);
            if (!o) return;
            o.childNodes[0].childNodes[1].childNodes[0].innerHTML = title;
        }
        this.Body = function (Id, wbody)
        {
            if (Id == null) return;
            var o = $(Id);
            if (!o) return;
            if (wbody.slice(0, 4) == "[pg]")
                o.childNodes[1].childNodes[1].innerHTML = "<iframe onfocus=\"MyWin.Show('" + Id + "',this)\" src='" + wbody.slice(4) + "' frameBorder='0' marginHeight='0' marginWidth='0' scrolling='no' width='100%' height='100%'></iframe>";
            else
                o.childNodes[1].childNodes[1].innerHTML = wbody;
        }
        this.Show = function (Id)
        {
            if (Id == null) return;
            var o = $(Id);
            if (!o) return;
            o.style.zIndex = ++zIndex;
        }
        this.Move_e = function (Id, l, t, ll, tt)
        {
            if (typeof (window["ct" + Id]) != "undefined") clearTimeout(window["ct" + Id]);
            var o = $(Id);
            if (!o) return;
            o.style.left = l + "px";
            o.style.top = t + "px";
            window["ct" + Id] = window.setTimeout("MyWin.Move_e('" + Id + "', " + l + " , " + t + ", " + ll + ", " + tt + ")", 1);
        }
        this.Close = function (Id, Opacity)
        {
            if (typeof (window["et" + Id]) != "undefined") clearTimeout(window["et" + Id]);
            var o = $(Id);
            if (!o) return;
            if (Opacity == 10) o.childNodes[0].childNodes[1].innerHTML = "";
            if (Ie)
            {
                o.style.filter = "alpha(opacity=" + Opacity + ",style=0)";
            }
            else
            {
                o.style.opacity = Opacity / 10;
            }
            if (Opacity > 20)
                Opacity -= 10;
            else
                Opacity--;
            if (Opacity <= 0)
            {
                if (o.getElementsByTagName("IFRAME").length != 0)
                {
                    o.getElementsByTagName("IFRAME").src = "about:blank";
                }
                o.innerHTML = "";
                document.body.removeChild(o);
                return;
            }
            window["et" + Id] = window.setTimeout("MyWin.Close('" + Id + "', " + Opacity + ")", 1);
        }
        this.ndiv = function (Id, Opacity)
        {
            var o = $(Id);
            if (!o) return;
            o.innerHTML = "";
            document.body.removeChild(o);
            return;
        }
    } //欢迎来到源码搜藏网，我们的网址是www.codesocang.com，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</script>
</head>
<body>
<a href="http://www.codesocang.com/">源码搜藏网</a>,站长必备的高质量网页特效和广告代码。codesocang.com，站长js特效。<hr>

<input type="button" value="这是一个默认窗口，窗口位置默认为当前可视区域的居中，把鼠标往下拉，下面有个按钮可以测试"  onclick="MyWin.Create('','标题','这里是内容，可以是变量哦');">
<br>
<input type="button" value="这个窗口设置了宽度500px、高度300px" onclick="MyWin.Create('','标题','这里是内容，可以是变量哦','500','300');">
<br>
<input type="button" value="这是一个固定了位置x=600px、y=400px的窗口" onclick="MyWin.Create('','标题','这里是内容，可以是变量哦','500','300','600','400');">
<br>
<input type="button" value="当窗口宽度或高度大于可视区域的宽度或高度，以固定位置的设置优先" onclick="MyWin.Create('','标题','这里是内容，可以是变量哦','700','900','600','400');">
<br>
<input type="button" value="这是没有设置固定位置时的情况" onclick="MyWin.Create('','标题','这里是内容，可以是变量哦','700','900');">
<br>
<input type="button" value="以上窗口都有遮罩，但这个没有" onclick="MyWin.Create('no','标题','这里是内容，可以是变量哦','500','300');">
<br>
<input type="button" value="细心的朋友可能已经发现了，没有遮罩的窗口可以打开无限个哦" onclick="MyWin.Create('no','标题','这里是内容，可以是变量哦','500','300','100','300');">
<br>
<input type="button" value="窗口里除了内容，也可以放iframe" onclick="MyWin.Create('no','我是源码搜藏网','[pg]http://www.codesocang.com','800','500');">
<br>
<input type="button" value="有遮罩的iframe，同上，盖住select没商量" onclick="MyWin.Create('','我是源码搜藏网','[pg]http://www.codesocang.com','800','500');">
<br>
<input type="button" value="考虑到大多用于单个窗口，且窗口位置可设置，所以没有写拖动函数，如有需要请自行添加" onclick="MyWin.Create('','^-^','我是不能拖动的');">
<br>
<input type="button" value="本代码测试通过IE6/7/8/9、FF3.6.2、chorme5.0.375.55、Safari4.0.5、Opera10.60" onclick="MyWin.Create('','^-^','本代码测试通过IE6/7/8/9、FF3.6.2、chorme5.0.375.55、Safari4.0.5、Opera10.60');">
<br>
<input type="button" value="本代码脱胎于网络收集的程序，我只是把它们磋成一砣，如有眼熟，请无视之…" onclick="MyWin.Create();">
<br>
<input type="button" value="本代码没有版权，欢迎转载，可用于任何个人或商业应用，但本人不负任何相关责任" onclick="MyWin.Create();">
<br>
<input type="button" value="本人所学有限，不足之处，请大侠们口诛笔伐，我受得了的…." onclick="MyWin.Create();">
<br>
<input type="button" value="BY sky 2010-9-29" onclick="MyWin.Create();">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<textarea rows="2" name="S1" cols="20">

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

简便的弹出窗口特效

点击链接弹出窗口，兼容当前主流浏览器。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,codesocang.com,www.codesocang.com,站长特效网" />
<meta name="description" content="www.codesocang.com,源码搜藏网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在源码搜藏网" />
<title>网页特效兼容各种浏览器且使用简便的弹出窗口源码搜藏网</title>
<style type="text/css">
body{margin:0px;padding:0px}
input{margin:5px;padding:0px;border:1px solid #000;}
</style>
<script type="text/javascript">
var MyWin = new Win();
var imgfile = "http://www.codesocang.com/img/1/"; //设置图片路径，相对或绝对都行
var imgname = new Array();
var img = new Array();
//预先加载图片
imgname[0] = imgfile + "clo.gif";
imgname[1] = imgfile + "b1.png";
imgname[2] = imgfile + "l1.png";
imgname[3] = imgfile + "l2.png";
imgname[4] = imgfile + "r1.png";
imgname[5] = imgfile + "r2.png";
imgname[6] = imgfile + "t1.png";
imgname[7] = imgfile + "t2.png";
imgname[8] = imgfile + "t3.png";
//预读图片
for (i = 0; i <= imgname.length - 1; i++)
{
img[i] = new Image();
img[i].src = imgname[i];
} //欢迎来到源码搜藏网，b我们的网址是www.codesocang.com，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
var zIndex = 0;
var Winid = 0;
var Ie = /msie/i.test(navigator.userAgent);
function $(Id) { return (document.getElementById(Id)) }
function Win()
{//欢迎来c到源码搜藏网，我们的网址是www.codesocang.com，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
this.Create = function (mask, title, wbody, w, h, l, t)
{
Winid++;
mask = mask;
title = title || "源码搜藏网－加载中…";
wbody = wbody || " <p align='center'>正在载入…</p>";
w = w || 350;
h = h || 150;
cw = document.documentElement.clientWidth;
ch = document.documentElement.clientHeight;
sw = document.documentElement.scrollWidth;
sh = document.documentElement.scrollHeight;
st = (document.documentElement.scrollTop || document.body.scrollTop);
if (w > cw)
ww = 0;
else
ww = (cw - w) / 2;
if (h > ch)
hh = 0;
else
hh = (st + (ch - h) / 2);
l = l || ww;
t = t || hh;
if (mask != "no")
{
var ndiv = document.createElement("DIV");
ndiv.setAttribute("id", "ndiv" + Winid);
ndiv.style.cssText = "width:" + sw + "px;height:" + sh + "px;left:0px;top:0px;position:absolute;overflow:hidden;background:#fff;filter:alpha(opacity=20); opacity:0.2;-moz-opacity:0.2;";
document.body.appendChild(ndiv);
if (Ie)
{
var niframe = document.createElement("iframe");
niframe.style.width = sw;
niframe.style.height = sh;
niframe.style.top = "0px";
niframe.style.left = "0px";
niframe.style.visibility = "inherit";
niframe.style.filter = "alpha(opacity=0)";
niframe.style.position = "absolute";
niframe.style.zIndex = -1;
ndiv.insertAdjacentElement("afterBegin", niframe);
}
}
var mywin = document.createElement("DIV");
mywin.setAttribute("id", "win" + Winid);
mywin.style.cssText = "width:" + w + "px;height:" + h + "px;left:0px;top:0px;position:absolute;overflow:hidden;padding:0px;font-family:Arial, 宋体";
mywin.style.zIndex = ++zIndex;
document.body.appendChild(mywin);
var mytie = document.createElement("DIV");
var myboy = document.createElement("DIV");
var mybom = document.createElement("DIV");
mytie.style.cssText = "overflow:hidden;height:30px;font-weight:bold;font-size:14px;width:100%";
myboy.style.cssText = "overflow:hidden;width:100%";
mybom.style.cssText = "overflow:hidden;height:30px;width:100%";
mywin.appendChild(mytie);
mywin.appendChild(myboy);
mywin.appendChild(mybom);
var wintag = [[mytie, 30, 15, "t1"], [mytie, 30, w - 30, "t2"], [mytie, 30, 15, "t3"], [myboy, h - 45, 15, "l1"], [myboy, h - 47, w - 32], [myboy, h - 45, 15, "r1"], [mybom, 15, 15, "l2"], [mybom, 15, w - 30, "b1"], [mybom, 15, 15, "r2"]];
for (var i = 0; i < 9; i++)
{
var temp = document.createElement("DIV");
temp.setAttribute("Fid", "win" + Winid);
wintag[i][0].appendChild(temp);
if (wintag[i][3])
{
temp.style.cssText = "float:left;height:" + wintag[i][1] + "px;width:" + wintag[i][2] + "px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + imgfile + "" + wintag[i][3] + ".png', sizingMethod='scale');background:url('" + imgfile + "" + wintag[i][3] + ".png') !important;background:;";
}
else
{
temp.style.cssText = "float:left;filter:alpha(Opacity=95,style=0);opacity:0.95;height:" + wintag[i][1] + "px;width:" + wintag[i][2] + "px;background:#f7f7f7;border:1px solid #666;overflow:hidden;padding:0px";
}
}
mytie.childNodes[1].innerHTML = "<div style=\"position:absolute;overflow:hidden;height:15px;top:12px;padding-left:4px;padding-right:4px;\"></div><div style=\"position:absolute;background:url('" + imgfile + "clo.gif');overflow:hidden;width:43px;height:17px;top:7px !important;right:15px\" title=\"关闭窗口\" onclick=\"MyWin.Close('win" + Winid + "',10); MyWin.ndiv('ndiv" + Winid + "',10);\"></div>";
this.Title("win" + Winid, title);
this.Body("win" + Winid, wbody);
this.Move_e("win" + Winid, l, t, 0, 0);
return (mywin);
}
this.Title = function (Id, title)
{
if (Id == null) return;
var o = $(Id);
if (!o) return;
o.childNodes[0].childNodes[1].childNodes[0].innerHTML = title;
}
this.Body = function (Id, wbody)
{
if (Id == null) return;
var o = $(Id);
if (!o) return;
if (wbody.slice(0, 4) == "[pg]")
o.childNodes[1].childNodes[1].innerHTML = "<iframe onfocus=\"MyWin.Show('" + Id + "',this)\" src='" + wbody.slice(4) + "' frameBorder='0' marginHeight='0' marginWidth='0' scrolling='no' width='100%' height='100%'></iframe>";
else
o.childNodes[1].childNodes[1].innerHTML = wbody;
}
this.Show = function (Id)
{
if (Id == null) return;
var o = $(Id);
if (!o) return;
o.style.zIndex = ++zIndex;
}
this.Move_e = function (Id, l, t, ll, tt)
{
if (typeof (window["ct" + Id]) != "undefined") clearTimeout(window["ct" + Id]);
var o = $(Id);
if (!o) return;
o.style.left = l + "px";
o.style.top = t + "px";
window["ct" + Id] = window.setTimeout("MyWin.Move_e('" + Id + "', " + l + " , " + t + ", " + ll + ", " + tt + ")", 1);
}
this.Close = function (Id, Opacity)
{
if (typeof (window["et" + Id]) != "undefined") clearTimeout(window["et" + Id]);
var o = $(Id);
if (!o) return;
if (Opacity == 10) o.childNodes[0].childNodes[1].innerHTML = "";
if (Ie)
{
o.style.filter = "alpha(opacity=" + Opacity + ",style=0)";
}
else
{
o.style.opacity = Opacity / 10;
}
if (Opacity > 20)
Opacity -= 10;
else
Opacity--;
if (Opacity <= 0)
{
if (o.getElementsByTagName("IFRAME").length != 0)
{
o.getElementsByTagName("IFRAME").src = "about:blank";
}
o.innerHTML = "";
document.body.removeChild(o);
return;
}
window["et" + Id] = window.setTimeout("MyWin.Close('" + Id + "', " + Opacity + ")", 1);
}
this.ndiv = function (Id, Opacity)
{
var o = $(Id);
if (!o) return;
o.innerHTML = "";
document.body.removeChild(o);
return;
}
} //欢迎来到源码搜藏网，我们的网址是www.codesocang.com，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</script>
</head>
<body>
<a href="http://www.codesocang.com/">源码搜藏网</a>,站长必备的高质量网页特效和广告代码。codesocang.com，站长js特效。<hr>

<input type="button" value="这是一个默认窗口，窗口位置默认为当前可视区域的居中，把鼠标往下拉，下面有个按钮可以测试" onclick="MyWin.Create('','标题','这里是内容，可以是变量哦');">
<br>
<input type="button" value="这个窗口设置了宽度500px、高度300px" onclick="MyWin.Create('','标题','这里是内容，可以是变量哦','500','300');">
<br>
<input type="button" value="这是一个固定了位置x=600px、y=400px的窗口" onclick="MyWin.Create('','标题','这里是内容，可以是变量哦','500','300','600','400');">
<br>
<input type="button" value="当窗口宽度或高度大于可视区域的宽度或高度，以固定位置的设置优先" onclick="MyWin.Create('','标题','这里是内容，可以是变量哦','700','900','600','400');">
<br>
<input type="button" value="这是没有设置固定位置时的情况" onclick="MyWin.Create('','标题','这里是内容，可以是变量哦','700','900');">
<br>
<input type="button" value="以上窗口都有遮罩，但这个没有" onclick="MyWin.Create('no','标题','这里是内容，可以是变量哦','500','300');">
<br>
<input type="button" value="细心的朋友可能已经发现了，没有遮罩的窗口可以打开无限个哦" onclick="MyWin.Create('no','标题','这里是内容，可以是变量哦','500','300','100','300');">
<br>
<input type="button" value="窗口里除了内容，也可以放iframe" onclick="MyWin.Create('no','我是源码搜藏网','[pg]http://www.codesocang.com','800','500');">
<br>
<input type="button" value="有遮罩的iframe，同上，盖住select没商量" onclick="MyWin.Create('','我是源码搜藏网','[pg]http://www.codesocang.com','800','500');">
<br>
<input type="button" value="考虑到大多用于单个窗口，且窗口位置可设置，所以没有写拖动函数，如有需要请自行添加" onclick="MyWin.Create('','^-^','我是不能拖动的');">
<br>
<input type="button" value="本代码测试通过IE6/7/8/9、FF3.6.2、chorme5.0.375.55、Safari4.0.5、Opera10.60" onclick="MyWin.Create('','^-^','本代码测试通过IE6/7/8/9、FF3.6.2、chorme5.0.375.55、Safari4.0.5、Opera10.60');">
<br>
<input type="button" value="本代码脱胎于网络收集的程序，我只是把它们磋成一砣，如有眼熟，请无视之…" onclick="MyWin.Create();">
<br>
<input type="button" value="本代码没有版权，欢迎转载，可用于任何个人或商业应用，但本人不负任何相关责任" onclick="MyWin.Create();">
<br>
<input type="button" value="本人所学有限，不足之处，请大侠们口诛笔伐，我受得了的…." onclick="MyWin.Create();">
<br>
<input type="button" value="BY sky 2010-9-29" onclick="MyWin.Create();">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<textarea rows="2" name="S1" cols="20">
</textarea>
</body>
</html>