设为首页优惠IDC收藏本站六狼博客六狼论坛
开启辅助访问 切换到窄版

六狼论坛

 找回密码
 立即注册

QQ登录

只需一步，快速开始

新浪微博账号登陆

只需一步，快速开始

搜索
六狼论坛»首页 › WEB前端 › JavaScript › 自己做的模拟模态对话框
返回列表 发新帖
查看: 51|回复: 0

自己做的模拟模态对话框

[复制链接]
前端小蔡

升级  48%

6

主题

6

主题

6

主题

童生

Rank: 1

积分
24
 楼主| 发表于 2013-1-4 02:43:31 | 显示全部楼层 |阅读模式
自己做的模拟模态对话框

<div class="postText"><div id="cnblogs_post_body">DEMO演示，请猛击
最近做完一个项目，发现浏览器兼容问题，模态对话框只有IE支持，但是IE9又不能支持带框架的对话框，那个对话框的大小打死都设置不了，在网上查说因为好多功能被IE9屏蔽了，于是自己做了一个模拟对话框的东西。
<div class="cnblogs_code"><!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></head><input type="button"  value="test" style="height:500px" />选择经度:<input type="text" id="txtSelect" /><iframe name="map" src="baidumap.htm" id="map" style="display:none"></iframe><body></body></html><script type="text/javascript">    document.getElementById("txtSelect").onfocus=function(){        var windows = document.getElementById("window");        var title = document.getElementById("title");        var layer = document.getElementById("layer");        if(windows==null&&layer==null&&title==null){            var style = document.createElement("style");            style.type="text/css";            document.body.appendChild(style);            var styleText = "#layer{ width:100%;height:100%;background:#000000;position:absolute;z-index:100;left:0;top:0;filter:alpha(opacity=40); opacity:0.4}";            styleText+="#window{position:absolute; z-index:1000;background:#ffc;}";            styleText+="#title{ background:#CCFFFF;width:100%;height:15%;font-size:2em;font-weight:bold; text-align:left; line-height:1.5em }"            styleText+="#content{ height:85%;width:100%;background:#CCCCCC}";            styleText+="#frame{ width:100%;height:100%;}    #map{ width:100%;height:100%}";            try{                if(typeof style.styleSheet.cssText!="undefined"){                    style.styleSheet.cssText=styleText;                }            }catch(ex){                style.appendChild(document.createTextNode(styleText));            }            var layer = document.createElement("div");            document.body.appendChild(layer);            layer.id="layer";            var windows = document.createElement("div");            document.body.appendChild(windows);            windows.id="window";            windows.style.height="400px";            windows.style.width = "600px";            var height = parseInt(windows.style.height);            var width = parseInt(windows.style.width);            windows.style.top = parseInt(document.documentElement.clientHeight/2-height/2)+"px";            windows.style.left = parseInt(document.documentElement.clientWidth/2-width/2)+"px";                        var title = document.createElement("div");            windows.appendChild(title);            title.id="title";            title.appendChild(document.createTextNode("点此关闭"));                        var content = document.createElement("div");            windows.appendChild(content);            content.id="content";                        var map = document.getElementById("map");            content.appendChild(map);            map.style.display="block";            if(typeof layer.style.opacity!="undefined"){                layer.style.opacity=0.5;            }            else if(typeof layer.style.filter!="undefined"){                layer.style.filter="alpha(opacity=50)";            }        }        else{            if(typeof layer.style.opacity!="undefined"){                layer.style.opacity=0.5;            }            else if(typeof layer.style.filter!="undefined"){                layer.style.filter="alpha(opacity=50)";            }                    layer.style.zIndex=100;            windows.style.zIndex=1000;            layer.style.display="block";            windows.style.display="block";        }                layer.onclick = title.onclick = function(){            windows.style.zIndex=-1000;            windows.style.display="none";                        //让层渐隐            var timer = setTimeout(displayLayer,200);            function displayLayer(){                if(typeof layer.style.opacity!="undefined"){                    var layers = document.getElementById("layer");                    var opacity = parseFloat(layers.style.opacity);                    opacity = opacity-0.1;                    if(opacity>0){                        setTimeout(arguments.callee,100);                    }                    else if(opacity<0){                        layers.style.zIndex=-100;                        clearTimeout(timer);                    }                    layers.style.opacity = opacity;                }                else if(typeof layer.style.filter!="undefined"){                    var layers = document.getElementById("layer");                    var filterStyle = layers.style.filter;                    //opacity = parseInt(filterStyle.substring(filterStyle.indexOf("=")+1));                    var opacity = parseInt(filterStyle.match(/\d+/));                    opacity = opacity-10;                    if(opacity>0){                        setTimeout(arguments.callee,100);                    }                    else if(opacity<0){                        layers.style.zIndex=-100;                        clearTimeout(timer);                    }                    layers.style.filter = "alpha(opacity="+opacity+")";                }                else{                    throw new Error("your browser version lower!");                }                        }                        document.getElementById("txtSelect").value=frames["map"].document.getElementById("hidden").value;        }    }    window.onunload=function(){            var windows = document.getElementById("window");            var title = document.getElementById("title");            var layer = document.getElementById("layer");            layer.onclick = windows.onclick=null;  //清除事件绑定            document.body.removeChild(layer);                windows.removeChild(title);            document.body.removeChild(windows);    }</script>
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表