今天在整理代码的时候找到了去年从一个同事手里收集到的一个挺不错的JS弹出层,呵呵,废话不多说,贴代码。
<html>
<head>
<title>JS弹出窗口</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<script>
//测试DAlert对象
var dc;
function Show1(){
//创建提示框内容部分
var d = document.createElement_x("div"); //创建主要显示DIV
d.style.width="560px"; //DIV样式设置
d.style.height="300px";
d.style.backgroundColor="#999";
d.style.padding="10px";
//向提示框内容部分画需要显示的信息
d.innerHTML="<div style='float:left;font-weight:bold;height:20px;line-height:20px; width:550px;font-size:12px'><span style='float:left;'>网站小统计</span><a href='javascript:;' style='float:right;' onclick=\"Hide1()\">关闭窗口</a></div><div><iframe frameborder='0' id='kj' name='kj' style='width:540px;height:280px;' scrolling='no' src=\'http://www.yasuoji120.com\'/> </iframe></div>";//DIV内容
//实例化提示框
dc = new DAlert(d);
//显示提示框
dc.show();
}
//提示框里的Button按钮点击事件
function Hide1(){
//移除对话框
dc.remove(); //移除DIV
}
function DAlert(mesDIV){
this.mesDIV=mesDIV;
//创建提示框底层
this.boDIV = document.createElement_x("div");
//获取body中间点
var x=document.body.clientWidth/2,y=document.body.clientHeight/2;
//配置样式
this.boDIV.style.opacity="0.50";
this.boDIV.style.filter="Alpha(opacity=50);";
this.boDIV.style.backgroundColor="#CCCCCC";
this.boDIV.style.height="100%";
this.boDIV.style.width="100%";
this.boDIV.style.marginTop="0px";
this.boDIV.style.marginLeft="0px";
this.boDIV.style.position="absolute";
this.boDIV.style.top="0px";
this.boDIV.style.left="0px";
this.boDIV.style.zIndex=100;
//显示提示框
this.show = function(){
//显示提示框底层
document.body.appendChild(this.boDIV);
//显示mesDIV
document.body.appendChild(this.mesDIV);
//把mesDIV定位到body中间
this.mesDIV.style.position="absolute";//设置弹出层为绝对定位
x=x-this.mesDIV.clientWidth/2;
y=y-this.mesDIV.clientHeight/2;
this.mesDIV.style.top=y+"px"; //距离网页头部距离
this.mesDIV.style.left=x+"px"; //左边距离
this.mesDIV.style.zIndex=101; //Zindex参数,在css里写做z-index
}
//移除提示框
this.remove = function(){
document.body.removeChild(this.boDIV);
document.body.removeChild(this.mesDIV);
}
}
</script>
<body>
<a href="#" onClick="Show1()">点击我啊进入易迅制冷资讯网</a>
</body>
</html>
代码经测试,在IE6,7,8 ,firefox,chrome浏览器均可使用。
分享到:
相关推荐
javascript弹出层插件支持点击触发js弹出层,滑过触发js弹出层,带动画效果js弹出层,可自定义函数回调js弹出层。js代码。
可自定义js弹出层动画特效是一款javascript弹出层插件,支持点击触发js弹出层,滑过触发js弹出层,带动画效果js弹出层,可自定义函数回调js弹出层。
开发时用到的Js弹出层
js弹出层效果js弹出层效果js弹出层效果js弹出层效果js弹出层效果js弹出层效果js弹出层效果js弹出层效果js弹出层效果js弹出层效果
js弹出div获取弹出层中文本值 经测试适用于现在主流 浏览器如:IE6+.. ff 等等
18种非常实用的js弹出层,对于前端页面开发有很大的借鉴以及帮助
js弹出层 城市切换效果js弹出层 城市切换效果
js弹出层效果了,里面有5-6个吧,具体我也不知道了,都是网上搜集的,代码很简单!
JS弹出层代码JS弹出层代码JS弹出层代码JS弹出层代码JS弹出层代码JS弹出层代码JS弹出层代码JS弹出层代码JS弹出层代码
JS弹出层大集合。很多好用的JS弹出层代码。你再也不用到处下载,一次下载,慢慢挑选
最简单实用的弹出层,已经封装,注释详细,方便调用。
js弹出层table运用,可移动框
js弹出层可拖动兼容各大浏览器 js弹出层可拖动兼容各大浏览器 js弹出层可拖动兼容各大浏览器 js弹出层可拖动兼容各大浏览器
非常简单好用的JS弹出层, 支持模态窗口 支持弹出层嵌套 支持返回值
JS弹出层
js 弹出层 效果 仿百度,js弹出层效果案例。可直接运行。
javascript弹出层表单提交代码,就是点击按钮后,弹出一个form表单让你填写,等你填好后再提交
JS弹出层对话框插件源码,包含弹出层对话框和Tooltip提示框,消息框等多种功能,兼容主流浏览器(注:不兼容IE9以下版本的IE浏览器)。内置4种颜色的皮肤,且可以自定义对话框样式,可设置对话框位置。Tooltip可以...