【转】div弹出窗口的制作
来自：http://www.21shipin.com/html/95347.shtml
可以覆盖父窗口，可以移动的，做了关闭按钮
<html>
<head>
<script>
function locking(){
document.all.ly.style.display="block";
document.all.ly.style.width=document.body.clientWidth;
document.all.ly.style.height=document.body.clientHeight;
document.all.Layer2.style.display='block'; }
function Lock_CheckForm(theForm){
document.all.ly.style.display='none';document.all.Layer2.style.display='none';
return false;
}
</script>
<style type="text/css">
<!--
.STYLE1 {font-size: 12px}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head>
<body>
<p align="center">
<input type="button" value="弹出DIV" onClick="locking()" />
</p>
<div id="ly" style="position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
z-index: 2; left: 0px; display: none;">
</div>
<!-- 浮层框架开始 -->
<div id="Layer2" align="center" style="position: absolute; z-index: 3; left: expression((document.body.offsetWidth-540)/2); top: expression((document.body.offsetHeight-170)/10);
background-color: #fff; display: none;" >
<table width="540" height="300" border="0" cellpadding="0" cellspacing="0" style="border: 0 solid #e7e3e7;
border-collapse: collapse ;" >
<tr>
<td style="background-color: #73A2d6; color: #fff; padding-left: 4px; padding-top: 2px;
font-weight: bold; font-size: 12px;" height="10" valign="middle">
<div align="right"><a href=JavaScript:; class="STYLE1" onclick="Lock_CheckForm(this);">[关闭]</a> </div></td>
</tr>
<tr>
<td height="130" align="center"> </td>
</tr>
</table>
</div>
<!-- 浮层框架结束 -->
</body>
</html> 一个简单的
<html><head>
<title>LIGHTBOX EXAMPLE</title>
<style>
.black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%;
background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); }
.white_content { display: none; position: absolute; top: 25%; left: 25%; width: 50%; height: 50%;
padding: 16px; border: 16px solid orange; background-color: white; z-index:1002; overflow: auto; }
</style>
</head>
<body>
<a href="javascript:void(0)" onclick="document.getElementById
('light').style.display='block';document.getElementById('fade').style.display='block'">打开</a>
<div id="light" class="white_content">
内容
<a href="javascript:void(0)" onclick="document.getElementById
('light').style.display='none';document.getElementById('fade').style.display='none'">
关闭</a></div>
<div id="fade" class="black_overlay">
</div>
</body>
</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=gb2312" />
<title>DOM_text01</title>
<style type="text/css">
body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;}
#bodyL{
float:left;
width:84px;
margin-right:2px;
}
a.od{
width:80px;
height:25px;
line-height:25px;
text-align:center;
font-weight:bold;
border: 2px solid #849BCA;
display:block;
color:#547BC9;
float:left;
text-decoration:none;
margin-top:2px;
}
a.od:link{
background:#EEF1F8;
}
a.od:visited{
background:#EEF1F8;
}
a.od:hover{
background:#EEE;
}
a.od:active{
background:#EEE;
}
#fd{
width:500px;
height:200px;
background:#EDF1F8;
border: 2px solid #849BCA;
margin-top:2px;
margin-left:2px;
float:left;
overflow:hidden;
position:absolute;
left:0px;
top:0px;
cursor:move;
float:left;
/*filter:alpha(opacity=50);*/
}
.content{
padding:10px;
}
</style>
</head>
<body>
<div id="bodyL">
<a href="#" onclick = "show('fd');return false;">
[打开层]
</a>
<a href="#" onclick = "closeed('fd');return false;">
[关闭层]
</a>
</div>
<div id="fd" style="display:none;filter:alpha(opacity=100);opacity:1;">
<div class="content">移动层</div>
</div>
<script type="text/javascript">
var prox;
var proy;
var proxc;
var proyc;
function show(id){/*--打开--*/
clearInterval(prox);
clearInterval(proy);
clearInterval(proxc);
clearInterval(proyc);
var o = document.getElementById(id);
o.style.display = "block";
o.style.width = "1px";
o.style.height = "1px";
prox = setInterval(function(){openx(o,500)},10);
}
function openx(o,x){/*--打开x--*/
var cx = parseInt(o.style.width);
if(cx < x)
{
o.style.width = (cx + Math.ceil((x-cx)/5)) +"px";
}
else
{
clearInterval(prox);
proy = setInterval(function(){openy(o,200)},10);
}
}
function openy(o,y){/*--打开y--*/
var cy = parseInt(o.style.height);
if(cy < y)
{
o.style.height = (cy + Math.ceil((y-cy)/5)) +"px";
}
else
{
clearInterval(proy);
}
}
function closeed(id){/*--关闭--*/
clearInterval(prox);
clearInterval(proy);
clearInterval(proxc);
clearInterval(proyc);
var o = document.getElementById(id);
if(o.style.display == "block")
{
proyc = setInterval(function(){closey(o)},10);
}
}
function closey(o){/*--打开y--*/
var cy = parseInt(o.style.height);
if(cy > 0)
{
o.style.height = (cy - Math.ceil(cy/5)) +"px";
}
else
{
clearInterval(proyc);
proxc = setInterval(function(){closex(o)},10);
}
}
function closex(o){/*--打开x--*/
var cx = parseInt(o.style.width);
if(cx > 0)
{
o.style.width = (cx - Math.ceil(cx/5)) +"px";
}
else
{
clearInterval(proxc);
o.style.display = "none";
}
}
/*-------------------------鼠标拖动---------------------*/
var od = document.getElementById("fd");
var dx,dy,mx,my,mouseD;
var odrag;
var isIE = document.all ? true : false;
document.onmousedown = function(e){
var e = e ? e : event;
if(e.button == (document.all ? 1 : 0))
{
mouseD = true;
}
}
document.onmouseup = function(){
mouseD = false;
odrag = "";
if(isIE)
{
od.releaseCapture();
od.filters.alpha.opacity = 100;
}
else
{
window.releaseEvents(od.MOUSEMOVE);
od.style.opacity = 1;
}
}
//function readyMove(e){
od.onmousedown = function(e){
odrag = this;
var e = e ? e : event;
if(e.button == (document.all ? 1 : 0))
{
mx = e.clientX;
my = e.clientY;
od.style.left = od.offsetLeft + "px";
od.style.top = od.offsetTop + "px";
if(isIE)
{
od.setCapture();
od.filters.alpha.opacity = 50;
}
else
{
window.captureEvents(Event.MOUSEMOVE);
od.style.opacity = 0.5;
} //alert(mx);
//alert(my); }
}
document.onmousemove = function(e){
var e = e ? e : event;
//alert(mrx);
//alert(e.button);
if(mouseD==true && odrag)
{
var mrx = e.clientX - mx;
var mry = e.clientY - my;
od.style.left = parseInt(od.style.left) +mrx + "px";
od.style.top = parseInt(od.style.top) + mry + "px";
mx = e.clientX;
my = e.clientY; }
}
</script>
</body>
</html>
【转】div弹出窗口的制作的更多相关文章
- DIV弹出和关闭新DIV
代码用HTML+JS实现: 代码(用HTML+JS实现): <!doctype html> <html lang="UTF-8"> <head> ...
- 在HTML网页中设置弹出窗口的办法
[1.最基本的弹出窗口代码] 其实代码非常简单: <SCRIPT LANGUAGE="javascript"> <!-- window.open ('page.h ...
- JS弹出窗口代码大全(详细整理)
1.弹启一个全屏窗口 复制代码代码如下: <html> <body http://www.jb51.net','脚本之家','fullscreen');">; < ...
- JS中，根据div数值判断弹出窗口
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery弹出窗口完整代码
jQuery弹出窗口完整代码 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm 1 <!DOCTYPE html PUBLIC "- ...
- jQuery弹出窗口浏览图片
效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/3.htm HTML文件代码: <!DOCTYPE HTML> <html> < ...
- EasyUI弹出窗口实例
效果体验:http://hovertree.com/texiao/jeasyui/1.htm 源代码下载:HovertreeJEasyUI HTML文件代码: <!DOCTYPE html> ...
- java selenium (十二) 操作弹出窗口
selenium 中如何处理弹出窗口 阅读目录 原理 在代码里, 通过 Set<String> allWindowsId = driver.getWindowHandles ...
- [转]js来弹出窗口的详细说明
1.警告对话框 <script> alert("警告文字") </script> 2.确认对话框 <script> confirm(" ...
随机推荐
- 学习：Log中'main', 'system', 'radio', 'events'
在Android中不同的log写到不同的设备中,共有/dev/log/system, /dev/log/main, /dev/log/radion, /dev/log/events四中类型.其中默认L ...
- HDU3930 （原根）
给定方程 X^A = B (mol C) ,求 在[0,C) 中所有的解 , 并且C为质数. 设 rt 为 C 的原根 , 则 X = rt^x (这里相当于求 A^x =B (mol C) 用大 ...
- 12-1 上午mysql 基本语句
create table test( code varchar(20) primary key, name varchar(20)); 关键字primary key 主键非空 not nullfore ...
- 《JS高程》数据类型学习笔记
认认真真看完了<JavaScript高级程序设计>第3章的基本概念,原来一直不明白的知识点都在这里面啊...T_T...基础真的很重要,很重要,很重要... 现在终于明白了读书的技巧,书读 ...
- Why did Jimmy Wales invest in Quora? Is he afraid that it will take over Wikipedia?
QUESTION: Why did Jimmy Wales invest in Quora? Is he afraid that it will take over Wikipedia? Answer ...
- 简单的将内容加入到drupal的主页面
首先要管理员用户 然后进入结构目录 进入菜单项 在main行 选择 列出list 选择添加链接 完善信息 保存即可 eg: http://peach.fafu.edu.cn/ 将papaya的jbro ...
- CentOS7上安装和使用Docker
导读 Docker 是一个开源工具,它可以让创建和管理 Linux 容器变得简单,容器就像是轻量级的虚拟机,并且可以以毫秒级的速度来启动或停止.在本篇文章中我们将教你如何在 CentOS 7.x 中安 ...
- ZMMR104-预留单批量删除及恢复
************************************************************************ Title : ZMMR104 ** Applicat ...
- jq中阻止元素的默认行为
event.preventDefault();//阻止元素的默认行为
- jQuery停止动画和判断是否处于动画状态
1.停止元素的动画 stop([clearQueue][,gotoEnd]); 参数clearQHCHC和gotoEnd都足町选的参数,为Boolean值(ture或flase).clearQueue ...