【转】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> &nbsp;&nbsp;&nbsp;&nbsp;</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(" ...

随机推荐

php大力力 [030节] php设计系统后台菜单
php大力力 [030节] php设计系统后台菜单 2015-08-28 00:11 开始设计: 2015-08-28 01:29 设计完毕. php大力力 [030节] php设计系统后台菜单 1. ...
BZOJ 1630/2023 Ant Counting 数蚂蚁
DP. #include<iostream> #include<cstdio> #include<cstring> #include<algorithm> ...
PHP中的文件下载
文件下载:用<a href="链接"></a>这种是下载,但对于浏览器能解释的文件类型此下载非彼下载.向服务器请求的时候:1.协议和版本2.头信息3.请求的 ...
数位dp-POJ-3252-Round Numbers
最近一直在看书和博客,即使做出几道题来也是看别人题解写的,感觉没自己的东西,所以很久没更新博客看了很多数位dp的题和题解,发现数位dp题是有固定的模版的,并且终于自己做出来一道. 我觉得用记忆化搜索 ...
Swift URL Schemes使用
URL Schemes通常用于分享和第三方登录,但有时需要在html跳至APP,或者APP跳至另外一个APP.这时也需要使用URL Schemes. 一.html跳转至APP eg:html跳转至te ...
HDU 1721
http://acm.hdu.edu.cn/showproblem.php?pid=1721 非常有趣的一道水题,注意到相隔一个点的粒子数是可以相互转移的,所以只要判红点的和与蓝点的和是否相等 #in ...
[转】HTTP请求流程（二）----Telnet模拟HTTP请求
转自: http://www.cnblogs.com/stg609/archive/2008/07/06/1237000.html 上一部分"流程简介", 我们大致了解了下HTTP ...
OpenHCI - 4.2 Endpoint Descriptor
4.2 Endpoint DescriptorAn Endpoint Descriptor (ED) is a 16-byte, memory resident structure that must ...
合并两个有序数组a和b到c
问题:两个有序数组a和b,合并成一个有序数组c. // 合并两个有序数组a和b到c void Merge_Array(int a[], int n, int b[], int m, int c[]) ...
JavaScript 阶段总结

【转】div弹出窗口的制作

【转】div弹出窗口的制作的更多相关文章

随机推荐

热门专题