以前总是看到很多的弹出框，样式各异。很多是用的第三方插件，总觉得没有追溯到根本。这次，我用单纯的js、html写了一个弹框例子，希望能够给各位一个小参考，共同学习：
<!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=utf-8" />
<link rel="stylesheet" type="text/css" href="t.css">
<title>弹出窗口</title>
<script>
function show(tag){
var light=document.getElementById(tag);
var fade=document.getElementById('fade');
light.style.display='block';
fade.style.display='block';
}
function hide(tag){
var light=document.getElementById(tag);
var fade=document.getElementById('fade');
light.style.display='none';
fade.style.display='none';
}
</script>
</head>
<body>
<a href="javascript:void(0)" onclick="show('light')">弹框打开ONE</a> <a href="javascript:void(0)" onclick="show('light2')">弹框打开TWO</a>
<div id="light" class="t1_content">
<div class="t1">
<div class="top">
<p>弹窗标题</p>
<a href="javascript:void(0)" onclick="hide('light')"><img src="images/t1/but_2.png" border="0" ></a></div>
<div class="nr"> 弹窗内容，可固定高度，或者改自适应高度
<p>
<input href="javascript:void(0)" onclick="hide('light')" type="button" class="but_1" value="确定"/>
</p>
</div>
<div class="fot"> </div>
</div>
</div>
<div id="light2" class="t2_content">
<div class="t2">
<div class="top">
<p>弹窗标题</p>
<a href="javascript:void(0)" onclick="hide('light2')"><img src="images/t2/but_1.png" border="0" ></a></div>
<div class="nr"> 弹窗内容，可固定高度，或者改自适应高度 </div>
<div class="fot">
<p> <a href="javascript:void(0)" onclick="hide('light2')"><img src="images/t2/but_2.png" border="0" ></a> </p>
</div>
</div>
</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>
附件中是css样式和图片代码
相关推荐
2.width height弹出框的长宽 默认500 300 3.scrolling弹出框是否有滚动条 可选值 auto no yes 默认auto 4.titleColor 弹出框title背景颜色 默认#7093DB 5.title 弹出框名称 6.弹出框url 7.弹出框是否可拖动 true or ...
Javascript弹出框架,功能相当不错
js弹出框几种形式，自己封装了一下，可以看看..
div弹出框,js弹出框,轻松轻松定制
自定义JavaScript弹出框组件自定义JavaScript弹出框组件
个人学习js弹出框的一些例子，含有alert,prompt,confirm, showModalDialog,showModelessDialog,很全也很简单，包学包会，例子全部都有，并且简单明了！
js弹出框弹出层 含交互 thickbox 获取返回值，我自己加了一个例子，里面包含获取弹出层的返回值的示列，希望对大家有用
JS弹出框 仿腾讯登录框 javascript实现弹出层效果 一个弹出层特效，精仿腾讯，兼容当前主流浏览器。
BaiduPop 弹出框 JS弹出框，方便实用
css js 弹出框
js弹出框-弹出层-拖拽-兼容 以前自己用的一个小插件。 纯js写的。 以前网上资料下的。 经过修改之后，兼容以及效果比较好用。 简单而精炼。 不需要jquery。
超级漂亮的js弹出框效果超级漂亮的js弹出框效果超级漂亮的js弹出框效果
漂亮的纯javascript弹出框验证表单，很实用，支持ajax
很漂亮的弹出框，可以弹出一张图片显示，可以弹出一个网页内容的显示，主要取决于链接后面是网页还是图片，很漂亮哦，欢迎下载
js弹出框选择器，弹出框中左边是菜单，右边是选择后的内容项
一个不错，很漂亮的JS弹出框，自己用的，大家想用就去下吧
js的弹出框 很实用的 没问题 js的弹出框 很实用的 没问题
登录弹出框JS网页特效
很好看的JS弹出框，具动态效果绝不死板，而且包括说明，操作简单