【转】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(" ...

随机推荐

转载：node.js socket.io
本文转自:http://www.xiaocai.name/post/cf1f9_7b6507 学习node.js socket.io 使用用node.js(socket.io)实现数据实时推送在 ...
postfix 邮件备份方法
postfix 邮件备份方法: postfix的bcc(密送)功能可以根据条件,将所有经过postfix队列的邮件根据规则密送到指定的邮箱. postfix带有三个bcc参数: ①.always_bc ...
array_walk() 函数
array_walk() 函数对数组中的每个元素应用回调函数.如果成功则返回 TRUE,否则返回 FALSE. 典型情况下 function 接受两个参数.array 参数的值作为第一个,键名作为第二 ...
HDU 5086
http://acm.hdu.edu.cn/showproblem.php?pid=5086 求所有连续区间的数字和本质是一个乘法原理,当前位置的数字出现次数=这个数之前的数字个数*这个数之后的数字 ...
转linux
随着上班的深入,愈来愈感觉到转linux的必要性,最近做实验室的网页,在windows下是好的, 没想到,传到liunx服务器上,居然出了问题,很是郁闷,平时还是用liunx用的少了. 以后操作系统要 ...
【题解】【BST】【Leetcode】Unique Binary Search Trees
Given n, how many structurally unique BST's (binary search trees) that store values 1...n? For examp ...
Linux常用命令整理 - imsoft.cnblogs
su 用户名在不退出登陆的情况下,切换到另外一个人的身份如果用户名缺省,则切换到root状态会提示输入密码,密码不回显的. 在用su命令切换root用户时,使用“-”选项,这样可以将root的环境变 ...
Matlab 2012a 下载和安装教程
迅雷下载地址 http://bbs.pinggu.org/thread-1426998-1-1.html(下载速度比较快) 1 Setup.exe 2. 不使用 internet 安装 then ...
iOS学习笔记---网络请求
一.HTTP协议的概念 HTTP协议:Hyper Text Transfer Protocol(超文本传输协议)是用于从万维网服务器传送超文本到本地浏览器的传输协议.HTTP是一个应用层协议,由请求和 ...
linux shell 逻辑运算符、逻辑表达式详解
shell的逻辑运算符涉及有以下几种类型,因此只要适当选择,可以解决我们很多复杂的判断,达到事半功倍效果. 一.逻辑运算符逻辑卷标表示意思 1. 关于档案与目录的侦测逻辑卷标! -f 常用!侦测 ...

【转】div弹出窗口的制作

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

随机推荐

热门专题