javascript 弹出层居中效果的制作
作者：bea
问题:做一个带拖动的弹出层效果(像提示框那种) 先写了一半,明天继续奋斗: <!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 h
问题:做一个带拖动的弹出层效果(像提示框那种)
先写了一半,明天继续奋斗:
<!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:300px; height:80px; border:5px solid #d3d3d3; background-color:#f7f7f7; position:absolute; padding:10px; }
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; }
</style>
<script language="javascript" type="text/javascript">
window.onload=function divcenter()
{ var c=document.createElement("div");
document.body.appendChild(c);
c.setAttribute("id","a");
var divId=document.getElementById("a");
divId.innerHTML+="对浏览器变形,刷新看是否居中";
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";},200);
}
</script>
</head>
<body>
<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需刷新才能执行]
点击右下角的"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需刷新才能执行]
有用 | 无用
先写了一半,明天继续奋斗:
<!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:300px; height:80px; border:5px solid #d3d3d3; background-color:#f7f7f7; position:absolute; padding:10px; }
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; }
</style>
<script language="javascript" type="text/javascript">
window.onload=function divcenter()
{ var c=document.createElement("div");
document.body.appendChild(c);
c.setAttribute("id","a");
var divId=document.getElementById("a");
divId.innerHTML+="对浏览器变形,刷新看是否居中";
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";},200);
}
</script>
</head>
<body>
<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需刷新才能执行]
点击右下角的"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需刷新才能执行]
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- js表格分页实现代码
- ext 同步和异步示例代码
- JQuery的ajax基础上的超强GridView展示
- jQuery slider Content(左右控制移动)
- 控制input的CSS但不影响CheckBox以及Radio的样式
- JavaScript switch case 的用法实例[范围]
- jQuery 事件队列调整方法
- javascript 面向对象编程 function是方法(函数)
- javascript 面向对象编程 聊聊对象的事
- javascript 面向对象编程 万物皆对象
- javascript 面向对象编程 function也是类
- 类似CSDN图片切换效果脚本
- var与Javascript变量隐式声明
- 颜色快速采集器javascript代码
- Javascript createElement和innerHTML增加页面元素的性能对比
- javascript 遮照层效果
- JavaScript 浮动定位提示效果实现代码
- html数组字符串拼接的最快方法
- javascript 缓冲效果实现代码 推荐