javascript 弹出层居中效果的制作

ttx9n · 发表于 2009-9-16 12:32:49

做一个带拖动的弹出层效果(像提示框那种) ,看了下代码与实现效果，值得学习应用。问题:做一个带拖动的弹出层效果(像提示框那种)
先写了一半,明天继续奋斗:

<!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){

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;

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){

} 
</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需刷新才能执行]

z835648964 · 发表于 2022-11-9 13:01:55

很好，谢谢分享

9jduu05 · 发表于 2022-11-24 06:24:38

女生看了弄丢了卡萨诺的卡洛斯

3t0ukmu · 发表于 2023-2-19 17:29:22

大家都不容易！

idy6_yus · 发表于 2023-10-17 06:44:03

看看看看看看看看看看看看看看看看看看看看看看看看看看看

sykzus · 发表于 2023-10-25 03:38:00

搞个免费的用用

u7yxn9 · 发表于 2023-10-27 20:55:54

很不错的源码论坛

3pjdk29w · 发表于 2023-11-14 23:07:10

的沙发水电费水电费

wqpa63gz · 发表于 2023-11-16 07:38:33

逛逛看看瞧瞧

q42obh · 发表于 2024-3-5 22:39:39

啦啦啦啦啦啦啦啦！

账号		自动登录	找回密码
密码			立即注册

[JavaScript] javascript 弹出层居中效果的制作

相关帖子