来自：http://www.21shipin.com/html/95347.shtml

可以覆盖父窗口，可以移动的，做了关闭按钮

  1. <html>
  2. <head>
  3.     <script>
  4.   function    locking(){
  5.    document.all.ly.style.display="block";
  6.    document.all.ly.style.width=document.body.clientWidth;
  7.    document.all.ly.style.height=document.body.clientHeight;
  8.    document.all.Layer2.style.display='block'; 
  9.  
  10.    }
  11.   function    Lock_CheckForm(theForm){
  12.    document.all.ly.style.display='none';document.all.Layer2.style.display='none';
  13.   return   false;
  14.    }
  15.     </script>
  16.     <style type="text/css">
  17. <!--
  18. .STYLE1 {font-size: 12px}
  19. a:link {
  20. color: #FFFFFF;
  21. text-decoration: none;
  22. }
  23. a:visited {
  24. text-decoration: none;
  25. }
  26. a:hover {
  27. text-decoration: none;
  28. }
  29. a:active {
  30. text-decoration: none;
  31. }
  32. -->
  33.     </style>
  34. <meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head>
  35. <body>
  36.     <p align="center">
  37.         <input type="button" value="弹出DIV" onClick="locking()" />
  38.     </p>
  39.     <div id="ly" style="position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
  40.          z-index: 2; left: 0px; display: none;">
  41.     </div>
  42.     <!--          浮层框架开始         -->
  43.     <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);
  44.          background-color: #fff; display: none;" >
  45.         <table width="540" height="300" border="0" cellpadding="0" cellspacing="0" style="border: 0    solid    #e7e3e7;
  46.              border-collapse: collapse ;" >
  47.             <tr>
  48.                 <td style="background-color: #73A2d6; color: #fff; padding-left: 4px; padding-top: 2px;
  49.                      font-weight: bold; font-size: 12px;" height="10" valign="middle">
  50.                      <div align="right"><a href=JavaScript:; class="STYLE1" onclick="Lock_CheckForm(this);">[关闭]</a> &nbsp;&nbsp;&nbsp;&nbsp;</div></td>
  51.             </tr>
  52.             <tr>
  53.                 <td height="130" align="center">
  54.  
  55.                 </td>
  56.             </tr>
  57.         </table>
  58.     </div>
  59.     <!--          浮层框架结束         -->
  60. </body>
  61. </html>
  62.  
  63. 一个简单的
  64. <html><head>
  65. <title>LIGHTBOX EXAMPLE</title>
  66. <style>
  67. .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%;
  68. background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); }
  69. .white_content { display: none; position: absolute; top: 25%; left: 25%; width: 50%; height: 50%;
  70. padding: 16px; border: 16px solid orange; background-color: white; z-index:1002; overflow: auto; }
  71. </style>
  72. </head>
  73. <body>
  74. <a href="javascript:void(0)" onclick="document.getElementById
  75. ('light').style.display='block';document.getElementById('fade').style.display='block'">打开</a>
  76. <div id="light" class="white_content">
  77.     内容
  78.     <a href="javascript:void(0)" onclick="document.getElementById
  79. ('light').style.display='none';document.getElementById('fade').style.display='none'">
  80.     关闭</a></div>
  81. <div id="fade" class="black_overlay">
  82. </div>
  83. </body>
  84. </html>
  85.  
  86. 可以移动的
  87. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  88. <html xmlns="http://www.w3.org/1999/xhtml">
  89. <head>
  90. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  91. <title>DOM_text01</title>
  92. <style type="text/css">
  93. body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;}
  94. #bodyL{
  95. float:left;
  96. width:84px;
  97. margin-right:2px;
  98. }
  99. a.od{
  100. width:80px;
  101. height:25px;
  102. line-height:25px;
  103. text-align:center;
  104. font-weight:bold;
  105. border: 2px solid #849BCA;
  106. display:block;
  107. color:#547BC9;
  108. float:left;
  109. text-decoration:none;
  110. margin-top:2px;
  111. }
  112. a.od:link{
  113. background:#EEF1F8;
  114. }
  115. a.od:visited{
  116. background:#EEF1F8;
  117. }
  118. a.od:hover{
  119. background:#EEE;
  120. }
  121. a.od:active{
  122. background:#EEE;
  123. }
  124. #fd{
  125. width:500px;
  126. height:200px;
  127. background:#EDF1F8;
  128. border: 2px solid #849BCA;
  129. margin-top:2px;
  130. margin-left:2px;
  131. float:left;
  132. overflow:hidden;
  133. position:absolute;
  134. left:0px;
  135. top:0px;
  136. cursor:move;
  137. float:left;
  138. /*filter:alpha(opacity=50);*/
  139. }
  140. .content{
  141. padding:10px;
  142. }
  143. </style>
  144. </head>
  145. <body>
  146. <div id="bodyL">
  147. <a href="#" onclick = "show('fd');return false;">
  148. [打开层]
  149. </a>
  150. <a href="#" onclick = "closeed('fd');return false;">
  151. [关闭层]
  152. </a>
  153. </div>
  154. <div id="fd" style="display:none;filter:alpha(opacity=100);opacity:1;">
  155. <div class="content">移动层</div>
  156. </div>
  157. <script type="text/javascript">
  158. var prox;
  159. var proy;
  160. var proxc;
  161. var proyc;
  162. function show(id){/*--打开--*/
  163. clearInterval(prox);
  164. clearInterval(proy);
  165. clearInterval(proxc);
  166. clearInterval(proyc);
  167. var o = document.getElementById(id);
  168. o.style.display = "block";
  169. o.style.width = "1px";
  170. o.style.height = "1px";
  171. prox = setInterval(function(){openx(o,500)},10);
  172. }
  173. function openx(o,x){/*--打开x--*/
  174. var cx = parseInt(o.style.width);
  175. if(cx < x)
  176. {
  177.    o.style.width = (cx + Math.ceil((x-cx)/5)) +"px";
  178. }
  179. else
  180. {
  181.    clearInterval(prox);
  182.    proy = setInterval(function(){openy(o,200)},10);
  183. }
  184. }
  185. function openy(o,y){/*--打开y--*/
  186. var cy = parseInt(o.style.height);
  187. if(cy < y)
  188. {
  189.    o.style.height = (cy + Math.ceil((y-cy)/5)) +"px";
  190. }
  191. else
  192. {
  193.    clearInterval(proy);
  194. }
  195. }
  196. function closeed(id){/*--关闭--*/
  197. clearInterval(prox);
  198. clearInterval(proy);
  199. clearInterval(proxc);
  200. clearInterval(proyc);
  201. var o = document.getElementById(id);
  202. if(o.style.display == "block")
  203. {
  204.    proyc = setInterval(function(){closey(o)},10);
  205. }
  206. }
  207. function closey(o){/*--打开y--*/
  208. var cy = parseInt(o.style.height);
  209. if(cy > 0)
  210. {
  211.    o.style.height = (cy - Math.ceil(cy/5)) +"px";
  212. }
  213. else
  214. {
  215.    clearInterval(proyc);
  216.    proxc = setInterval(function(){closex(o)},10);
  217. }
  218. }
  219. function closex(o){/*--打开x--*/
  220. var cx = parseInt(o.style.width);
  221. if(cx > 0)
  222. {
  223.    o.style.width = (cx - Math.ceil(cx/5)) +"px";
  224. }
  225. else
  226. {
  227.    clearInterval(proxc);
  228.    o.style.display = "none";
  229. }
  230. }
  231. /*-------------------------鼠标拖动---------------------*/
  232. var od = document.getElementById("fd");
  233. var dx,dy,mx,my,mouseD;
  234. var odrag;
  235. var isIE = document.all ? true : false;
  236. document.onmousedown = function(e){
  237. var e = e ? e : event;
  238. if(e.button == (document.all ? 1 : 0))
  239. {
  240.    mouseD = true;
  241. }
  242. }
  243. document.onmouseup = function(){
  244. mouseD = false;
  245. odrag = "";
  246. if(isIE)
  247. {
  248.    od.releaseCapture();
  249.    od.filters.alpha.opacity = 100;
  250. }
  251. else
  252. {
  253.    window.releaseEvents(od.MOUSEMOVE);
  254.    od.style.opacity = 1;
  255. }
  256. }
  257. //function readyMove(e){
  258. od.onmousedown = function(e){
  259. odrag = this;
  260. var e = e ? e : event;
  261. if(e.button == (document.all ? 1 : 0))
  262. {
  263.    mx = e.clientX;
  264.    my = e.clientY;
  265.    od.style.left = od.offsetLeft + "px";
  266.    od.style.top = od.offsetTop + "px";
  267.    if(isIE)
  268.    {
  269.     od.setCapture();
  270.     od.filters.alpha.opacity = 50;
  271.    }
  272.    else
  273.    {
  274.     window.captureEvents(Event.MOUSEMOVE);
  275.     od.style.opacity = 0.5;
  276.    }
  277.  
  278.    //alert(mx);
  279.    //alert(my);
  280.  
  281. }
  282. }
  283. document.onmousemove = function(e){
  284. var e = e ? e : event;
  285. //alert(mrx);
  286. //alert(e.button);
  287. if(mouseD==true && odrag)
  288. {
  289.    var mrx = e.clientX - mx;
  290.    var mry = e.clientY - my;
  291.    od.style.left = parseInt(od.style.left) +mrx + "px";
  292.    od.style.top = parseInt(od.style.top) + mry + "px";
  293.    mx = e.clientX;
  294.    my = e.clientY;
  295.  
  296. }
  297. }
  298. </script>
  299. </body>
  300. </html>

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

  1. DIV弹出和关闭新DIV

    代码用HTML+JS实现: 代码(用HTML+JS实现): <!doctype html> <html lang="UTF-8"> <head> ...

  2. 在HTML网页中设置弹出窗口的办法

    [1.最基本的弹出窗口代码] 其实代码非常简单: <SCRIPT LANGUAGE="javascript"> <!-- window.open ('page.h ...

  3. JS弹出窗口代码大全(详细整理)

    1.弹启一个全屏窗口 复制代码代码如下: <html> <body http://www.jb51.net','脚本之家','fullscreen');">; < ...

  4. JS中，根据div数值判断弹出窗口

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. jQuery弹出窗口完整代码

    jQuery弹出窗口完整代码 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm 1 <!DOCTYPE html PUBLIC "- ...

  6. jQuery弹出窗口浏览图片

    效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/3.htm HTML文件代码: <!DOCTYPE HTML> <html> < ...

  7. EasyUI弹出窗口实例

    效果体验:http://hovertree.com/texiao/jeasyui/1.htm 源代码下载:HovertreeJEasyUI HTML文件代码: <!DOCTYPE html> ...

  8. java selenium (十二) 操作弹出窗口

    selenium 中如何处理弹出窗口 阅读目录 原理 在代码里, 通过         Set<String> allWindowsId = driver.getWindowHandles ...

  9. [转]js来弹出窗口的详细说明

    1.警告对话框 <script> alert("警告文字") </script> 2.确认对话框 <script> confirm(" ...

随机推荐

  1. 12-1 上午mysql 基本语句

    create table test( code varchar(20) primary key, name varchar(20)); 关键字primary key 主键非空 not nullfore ...

  2. [转]Golang之struct类型

    http://blog.chinaunix.net/xmlrpc.php?r=blog/article&uid=22312037&id=3756923 一.struct        ...

  3. strlen和mb_strlen的区别

    在php中常见的计算字符串长度的函数有:strlen和mb_strlen.当字符全是英文字符的时候,两者是一样.这里主要比较一下,中英文混排的时候,两个计算结果. 在PHP中,strlen与mb_st ...

  4. opencv3.1包安装

    由于之前零零碎碎安装了很多必要的库: 现在只需: (1)下载和解压包 https://github.com/daveselinger/opencv/tree/3.1.0-with-cuda8 这里的分 ...

  5. JAVA学习之Ecplise IDE 使用技巧（2）第二章：键盘小快手，代码辅助

    上一篇:JAVA学习之Ecplise IDE 使用技巧(1)第一章:我的地盘我做主,工作空间 第二章:键盘小快手,代码辅助 内容包括: 第一:显示行号 如何设置行号:Ecplice菜单Windows& ...

  6. 使用labview对kinect进行开发

    一.必要工具: LabVIEW 2011 或更高版本 用于Microsoft Kinect的Kinesthesia工具包 - 利兹大学(University of Leeds) 详情参见(先注册ni) ...

  7. 162. Find Peak Element

    A peak element is an element that is greater than its neighbors. Given an input array where num[i] ≠ ...

  8. linux文件系统---10

    进入 Linux 根目录(即“/”, Linux 文件系统的入口, 也是处于最高一级的目录),运行“ls –l”命令,可以看到 Linux 系统包含以下目录. 1．/bin 包含基本命令,如 ls.c ...

  9. makefile--模式规则（七）

    原创博文,转载请标明出处--周学伟http://www.cnblogs.com/zxouxuewei/ 上一节讲到目录创建成功,目标文件没有生产到对应目录下,这里我们先给目标文件加上对应目录,这样的话 ...

  10. MongoDB安装、配置和基本使用

    一.搭建MongoDB的yum源 如果安装epel扩展源,可以安装MongoDB2.4版本 如要安装3.0版本,需要自己配置yum源,官方提供的源只支持64位系统 # vim /etc/yum.rep ...