来自：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. php大力力 [013节]mySQL数据库乱码问题我还没解决

    <?php echo"测试<br>"; $sql_connection = mysql_connect("localhost","e ...

  2. Tips about Object-oriented programming

    1, Return subinterface For example, we have a parent interface: public interface A<T extends A< ...

  3. 多个storyboard开发应用程序,封装.bundle和.a不用xib使用storyboard!!!

    一,封装.bundle和.a使用xib的方式前面已经说过了,具体方式不再赘述,简单介绍于下: 静态库加.h  bundle:删plist,改sdk,加xib 简称psx三步 引用库的项目,加.a .b ...

  4. List<T>转换为DataTable

    List<info> infos = Dal.GetInfos(); DataTable dt = new DataTable(); dt.Columns.Add("cName& ...

  5. PHP CI框架email类发送邮件

    用CI框架发送邮件类 在中文标题太长的情况下会出现乱码,搜索后说是发送邮件的时候有标题长度的限制,按说的方法修改后,还是没能得到解决,后来发现需要转换邮件标题的编码,解决方法如下: 打开 librar ...

  6. WPF Step By Step 完整布局介绍

    WPF Step By Step 完整布局介绍 回顾 上一篇,我们介绍了基本控件及控件的重要属性和用法,我们本篇详细介绍WPF中的几种布局容器及每种布局容器的使用场景,当 然这些都是本人在实际项目中的 ...

  7. jQuery实现产品滚动效果

    html: <div class="win_list_b"> <div class="scroll" style="height: ...

  8. Smart20学习记录----异步通知

    异步通知: 阻塞与非阻塞访问.poll()函数提供了较好地解决设备访问的机制(应用程序主动访问) 异步通知:一旦设备就绪,则主动通知应用程序,这样应用程序根本就不需要查询设备状态,这一点非常类似于硬件 ...

  9. 为AM335x移植Linux内核主线代码

    /********************************************************************** * 为AM335x移植Linux内核主线代码 * 说明: ...

  10. Java-->分割文件

    --> 通过IO 流将一个文件分割成多份 package com.dragon.java.splitfile; import java.io.File; import java.io.FileI ...