javascript 弹出层居中效果的制作

更新时间：2009年09月16日 12:32:49 作者：

做一个带拖动的弹出层效果(像提示框那种) ,看了下代码与实现效果，值得学习应用。

问题:做一个带拖动的弹出层效果(像提示框那种)
先写了一半,明天继续奋斗:

点击右下角的"OPEN"

<!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" /> <meta name="author" content="Stri" /> <title>javascript 弹出层居中效果的制作</title> <style type="text/css"> * { padding:0; margin:0; list-style:none; } body { font-family:Verdana, Geneva, sans-serif; font-size:14px; } #a { width:380px; height:80px; border:5px solid #d3d3d3; background-color:#f7f7f7; position:absolute; padding:10px; z-index:9999; } a.btn { display:block; width:80px; cursor:pointer; background-color:#f7f7f7; padding:2px 0px; border:1px solid #d5d5d5; vertical-align:middle; text-align:center; margin:50px auto 5px; text-decoration:none; } a:hover { background-color:#333; color:#fff; font-weight:bold; } #aa { position:fixed; bottom:20px; right:10px; } </style> <script language="javascript" type="text/javascript"> var drg=true; var ns=(document.all) ? false : true; function divcenter() {remove(); var c=document.createElement("div"); document.body.appendChild(c); c.setAttribute("id","a");         c.setAttribute("dragable","dragable");         c.onmousedown=foo;     var divId=document.getElementById("a");      divId.innerHTML+="出现代码异常!<br>错误编号:0015;";     divId.style.left=(document.documentElement.clientWidth-divId.clientWidth)/2+document.documentElement.scrollLeft+"px"; setTimeout(function(){divId.style.top=(document.documentElement.clientHeight-divId.clientHeight)/2+document.documentElement.scrollTop-50+"px";},100); } //移除 function remove(){     if(document.getElementById("a"))     {document.body.removeChild(document.getElementById("a"));         }}          function foo(){     if(drg){         if(document.getElementById("a")!=null)         {             obj=document.getElementById("a");             document.onmousedown=m_d;             document.onmouseup=m_u;             }         }         else         {                   document.onmousemove=no_f;          document.onmousedown=no_f;          document.onmouseup=no_f;          } } function m_d(e){      document.onmousemove=m_m;      x=(ns)?e.pageX:event.x;      y=(ns)?e.pageY:event.y;      cx=obj.offsetLeft-x;      cy=obj.offsetTop-y;           } function m_m(e){           drg=false;      x=(ns)?e.pageX:event.x;      y=(ns)?e.pageY:event.y;      obj.style.left=(cx+x)+"px";      obj.style.top=(cy+y)+"px";          } function m_u(){     drg=true;     document.onmousedown=no_f;     document.onmousemove=no_f;     document.onmouseup=no_f;     } function no_f(){     return false;} </script> </head> <body> <a href="javascript:void(0);" onclick="divcenter();" id="aa">open</a> <script type="text/javascript"> x:for(var i=1; i<100;i++){ var a=document.createElement("div"); a.innerHTML=""+i+""; document.body.appendChild(a);} </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

关于每一步的理解,最后解释.毕竟代码还没完全整理
被从中间扩展缓冲的效果算法难住了!
*****************OK,也不算难****************
就是让div的left和top属性随着width一起渐变就行了

<!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" /> <meta name="author" content="Stri" /> <title>javascript 弹出层居中效果的制作</title> <style type="text/css"> * { padding:0; margin:0; list-style:none; } body { font-family:Verdana, Geneva, sans-serif; font-size:14px; } #a { width:380px; height:80px; border:5px solid #d3d3d3; background-color:#f7f7f7; position:absolute; padding:10px; z-index:9999; } a.btn { display:block; width:80px; cursor:pointer; background-color:#f7f7f7; padding:2px 0px; border:1px solid #d5d5d5; vertical-align:middle; text-align:center; margin:50px auto 5px; text-decoration:none; } a:hover { background-color:#333; color:#fff; font-weight:bold; } #aa { position:fixed; bottom:20px; right:10px; } </style> <script language="javascript" type="text/javascript"> var drg=true; var ns=(document.all) ? false : true; function divcenter() {remove(); var c=document.createElement("div"); document.body.appendChild(c); c.setAttribute("id","a");         c.setAttribute("dragable","dragable");         c.onmousedown=foo;     var divId=document.getElementById("a");      divId.innerHTML+="出现代码异常!<br>错误编号:0015;";     //divId.style.left=(document.documentElement.clientWidth-divId.clientWidth)/2+document.documentElement.scrollLeft+"px"; //setTimeout(function(){divId.style.top=(document.documentElement.clientHeight-divId.clientHeight)/2+document.documentElement.scrollTop-50+"px";},100); h_w(300,80); } //移除 function remove(){     if(document.getElementById("a"))     {document.body.removeChild(document.getElementById("a"));         }}          function foo(){     if(drg){         if(document.getElementById("a")!=null)         {             obj=document.getElementById("a");             document.onmousedown=m_d;             document.onmouseup=m_u;             }         }         else         {                   document.onmousemove=no_f;          document.onmousedown=no_f;          document.onmouseup=no_f;          } } function m_d(e){      document.onmousemove=m_m;      x=(ns)?e.pageX:event.x;      y=(ns)?e.pageY:event.y;      cx=obj.offsetLeft-x;      cy=obj.offsetTop-y;           } function m_m(e){           drg=false;      x=(ns)?e.pageX:event.x;      y=(ns)?e.pageY:event.y;      obj.style.left=(cx+x)+"px";      obj.style.top=(cy+y)+"px";          } function m_u(){     drg=true;     document.onmousedown=no_f;     document.onmousemove=no_f;     document.onmouseup=no_f;     } function no_f(){     return false;}          function h_w(a,b){     divId=document.getElementById("a");     divId.style.width="0px";     divId.style.height="0px";     var s=function(){         var w=parseInt(divId.style.width);         if(w<a){             divId.style.width=w+Math.ceil((a-w)/20)+"px";             divId.style.left=(document.documentElement.clientWidth-divId.clientWidth)/2+document.documentElement.scrollLeft+"px";}             else             {clearInterval(st); divId.style.width=a+"px";}                          }     var t=function(){         var h=parseInt(divId.style.height);         if(h<b){             divId.style.height=h+Math.ceil((b-h)/10)+"px";         divId.style.top=(document.documentElement.clientHeight-divId.clientHeight)/2+document.documentElement.scrollTop-10+"px";}             else             {clearInterval(tt); divId.style.height=b+"px";}                          }                  var st = window.setInterval(s,1);         var tt=window.setInterval(t,1);      } </script> </head> <body> <a href="javascript:void(0);" onclick="divcenter();" id="aa">提交</a> <script type="text/javascript"> x:for(var i=1; i<100;i++){ var a=document.createElement("div"); a.innerHTML=""+i+""; document.body.appendChild(a);} </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

uniapp @click事件冒泡问题解决示例
这篇文章主要为大家介绍了uniapp @click事件冒泡问题解决示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
js下载文件并修改文件名
这篇文章主要为大家详细介绍了js下载文件并修改文件名的代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
详解Js 根据文件夹目录获取Json数据输出demo
这篇文章主要为大家介绍了Js 根据文件夹目录获取Json数据输出示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
JS计算斐波拉切代码实例
这篇文章主要介绍了js计算斐波拉切,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-09-09
JavaScript运动框架多值运动(四)
这篇文章主要为大家详细介绍了JavaScript运动框架第四部分，多值运动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
uni-app微信小程序之红包雨活动完整源码
最近公司需求做一个微信红包雨功能,这里给大家总结下实现的方法,这篇文章主要给大家介绍了关于uni-app微信小程序之红包雨活动的相关资料,需要的朋友可以参考下
2024-01-01
JavaScript去除空格的几种方法
JavaScript去除空格的几种方法...
2006-10-10
JavaScript canvas实现文字时钟
这篇文章主要为大家详细介绍了JavaScript canvas实现文字时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-01-01
JavaScript实现计算多维嵌套数组深度
在前端开发中，经常会遇到需要处理多维嵌套的数据结构，并需要计算出它们的深度，本文就来讲讲如何使用JavaScript实现计算多维嵌套数组深度吧
2023-06-06
js 实现复选框只能选择一项的示例代码
下面小编就为大家分享一篇js 实现复选框只能选择一项的示例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-01-01