发新话题
打印

[代码] 兼容FF/IE7的可移动弹出层,值得收藏

兼容FF/IE7的可移动弹出层,值得收藏

查看数: 63 回复数: 0 最新回复

与好友共享:

内容简介:点击关闭

Copy语言代码:!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
metahttp-equiv=C ...
Copy
语言代码:
<!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=utf-8" />
<
title>无标题文档</title>
<
script language="javascript">
function 
alertWin(titlemsgwh){ 
    var 
s=document.getElementsByTagName("select"); //--------------把所有select标签捉住
    
for(var j=0;j<s.length;j++){s[j].style.display="none";} //--------------设为不显示,再进行下面操作
    
var titleheight "22px"// 提示窗口标题高度 
    
var bordercolor "#666699"// 提示窗口的边框颜色 
    
var titlecolor "#FFFFFF"// 提示窗口的标题颜色 
    
var titlebgcolor "#666699"// 提示窗口的标题背景色
    
var bgcolor "#FFFFFF"// 提示内容的背景色
    
    
var iWidth document.documentElement.clientWidth
    var 
iHeight document.documentElement.clientHeight
    var 
bgObj document.createElement("div"); 
    
bgObj.style.cssText "position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max(document.body.clientHeightiHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:101;";
    
document.body.appendChild(bgObj); 
    
    var 
msgObj=document.createElement("div");
    
msgObj.style.cssText "position:absolute;font:11px '宋体';top:"+(iHeight-h)/2+"px;left:"+(iWidth-w)/2+"px;width:"+w+"px;height:"+h+"px;text-align:center;border:1px solid "+bordercolor+";background-color:"+bgcolor+";padding:1px;line-height:22px;z-index:102;";
    
document.body.appendChild(msgObj);
    
    var 
table document.createElement("table");
    
msgObj.appendChild(table);
    
table.style.cssText "margin:0px;border:0px;padding:0px;";
    
table.cellSpacing 0;
    var 
tr table.insertRow(-1);
    var 
titleBar tr.insertCell(-1);
    
titleBar.style.cssText "width:100%;height:"+titleheight+"px;text-align:left;padding:3px;margin:0px;font:bold 13px '宋体';color:"+titlecolor+";border:1px solid " bordercolor ";cursor:move;background-color:" titlebgcolor;
    
titleBar.style.paddingLeft "10px";
    
titleBar.innerHTML title;
    var 
moveX 0;
    var 
moveY 0;
    var 
moveTop 0;
    var 
moveLeft 0;
    var 
moveable false;
    var 
docMouseMoveEvent document.onmousemove;
    var 
docMouseUpEvent document.onmouseup;
    
titleBar.onmousedown = function() {
        var 
evt getEvent();
        
moveable true
        
moveX evt.clientX;
        
moveY evt.clientY;
        
moveTop parseInt(msgObj.style.top);
        
moveLeft parseInt(msgObj.style.left);
        
        
document.onmousemove = function() {
            if (
moveable) {
                var 
evt getEvent();
                var 
moveLeft evt.clientX moveX;
                var 
moveTop evt.clientY moveY;
                if ( 
&&( iWidth) && && (iHeight) ) {
                    
msgObj.style.left "px";
                    
msgObj.style.top "px";
                }
            }    
        };
        
document.onmouseup = function () { 
            if (
moveable) { 
                
document.onmousemove docMouseMoveEvent;
                
document.onmouseup docMouseUpEvent;
                
moveable false
                
moveX 0;
                
moveY 0;
                
moveTop 0;
                
moveLeft 0;
            } 
        };
    }
    
    var 
closeBtn tr.insertCell(-1);
    
closeBtn.style.cssText "cursor:pointer; padding:2px;background-color:" titlebgcolor;
    
closeBtn.innerHTML "<span style='font-size:15pt; color:"+titlecolor+";'>×</span>";
    
closeBtn.onclick = function(){ 
    for(var 
j=0;j<s.length;j++){s[j].style.display="";} //--------------再给select显出来
        
document.body.removeChild(bgObj); 
        
document.body.removeChild(msgObj); 
    } 
    var 
msgBox table.insertRow(-1).insertCell(-1);
    
msgBox.style.cssText "font:10pt '宋体';";
    
msgBox.colSpan  2;
    
msgBox.innerHTML msg;
    
    
// 获得事件Event对象,用于兼容IE和FireFox
    
function getEvent() {
        return 
window.event || arguments.callee.caller.arguments[0];
    }

</script>
</head>
<body>
<input type="button" value="点这里" onclick="alertWin('标题','这里是内容',300,200);" />
<select>
<option>件Event对象,用于兼</opation>
</select>
</body>
</html>
我研究了半天,不知道怎么给内容想下面再增加一个表格

底部增加一个表格多好,可惜俺不会加

请高手完善下

感谢!
你现在是游客:请登录或者注册

搜索更多相关主题的帖子: 收藏

Rojo google reader netvibes 哪吒 抓虾 my yahoo Feedsky FEED 订阅
作者: fenanr 主题: 分享收藏的周总理多年的照片。 时间: 2007-8-4 13:20
作者: fenanr 主题: 《DZ论坛 页面嵌入 QQ书签 百度搜藏 雅虎收藏》 时间: 2008-3-31 14:58
作者: Yuan 主题: 常用正则表达式收藏 时间: 2008-7-11 23:38
作者: fenanr 主题: MSSQL数据类型收藏 时间: 2008-7-19 09:57
作者: Yuan 主题: 兼容FF/IE7的可移动弹出层,值得收藏 时间: 2008-11-6 15:08

TOP

最新网站秀: (还等什么?马上加入我们吧! 快速加入

 华中师范大  盱眙吧1  南邮风云   夜族网游公  在日中华情  生活大家坛  智商250  塞班智能手  论剑社区  潮州论坛  灵下异度  封开家园 
用户正在观看: 热门标签
美女人体艺术绝
杀破狼
樱之炫视频教程——五
雨儿短裙热舞
情圣【国语中字】DV
作品源自网络,请支持正版


沙漠旋转工地新记录


太空极限跳跃 1分


太空极限跳跃 1分


太空军用机场 2分1
发新话题