弹出框问题

现在正在进行的一个项目要用到弹出框，目前我实现的方式是用js对页面中的div隐藏与显示，总感觉这种方法不是很先进，不知道大家平常是怎么处理弹出框的，我把我做的一个demo给大家看看，希望大家提出宝贵的意见：<!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>
<style type="text/css">
*{margin:0;padding:0;font-size:12px}
.dialog{position:absolute;z-index:10000;width:300px;height:auto;left:50%;margin-left:-150px;top:200px;border:1px solid #6D97BD;display:none;}
.dialogTop{ height:20px; background:#8CA7D0; border-bottom:1px solid #999}
.dialogTop span{ float:right; color:#fff; padding-right:5px; ine-height:20px; cursor:pointer}
.dialogCon{ line-height:20px;}
.dialogBot{ height:20px; text-align:center; background:#F3F3F3}
#zhezhao{position:absolute;z-index:9999;top:0;left:0;width:100%;background:#ccc;filter:Alpha(opacity=50);opacity:0.6;}
</style>
</head>
<body>
<p onclick="showDialog.show('dialog')" >点击弹出</p>
<div class="zhewen" style="height:900px; border:1px solid #000; width:800px; margin:0 auto; background:#ccc;">正文部分</div><div class="dialog" id="dialog">
<div class="dialogTop"><span onclick="showDialog.close('dialog')">关闭</span></div>
<div class="dialogCon">这里是内容</div>
<div class="dialogBot"><input type="button" value="确定" onclick="showDialog.close('dialog')" /></div>
</div>
</body>
<script language="javascript">
function $(id){
if(typeof(id)=="string")
return document.getElementById(id)
}
var showDialog={
show:function(id){
$(id).style.display="block";
//判断dialog是否定义了宽度
if($(id).style.width){
//alert(parseInt($(id).style.width)/2)
$(id).style.marginLeft=-parseInt($(id).style.width)/2+"px";
}
//添加遮罩层
var zhezhao=document.createElement("iframe");
//遮罩层的高度为当前页面高度
zhezhao.style.height=document.body.scrollHeight+"px";
zhezhao.setAttribute('id',"zhezhao");
document.body.appendChild(zhezhao);
},
close:function(id){
$(id).style.display="none";
if($("zhezhao"))
 document.body.removeChild($("zhezhao"))
}
}
</script>
</html>

解决方案 »

  1.   

     lz到網上下別人寫的嘛。這里就有一個，
    http://leotheme.cn/wp-content/uploads/Example/js/tipswindown/
      

  2.   

        我觉得，弹出对话框大多都是通过显示和隐藏div来实现的，这个lz说得不错。遮罩层也是用div的，而楼主用了iframe，应该也是可以的。但我试了楼主的这个demo后，发现遮罩层的颜色在IE和FF与chrome中显示不太一样，于是将iframe改为div，IE才葳和其它浏览器的一致了，所以还是建议用div表示遮罩层。
        关于改进，根据个人经验有几点：
        1、在弹出遮罩层之后，可以隐藏右边的滚动条的，这要加一些代码了，在网上都有的。这里推荐一个觉得比较好的资源：http://www.eight.nl/static/files/leightbox/（但这是基于prototype.js的，可以稍微改一下的） 
        2、弹出对话框的定位问题，楼主已经在css里设置了，这种是可以的，而且也比较的方便。也有其它方法。因为对话框的宽度和高度是固定的，如果要将弹出对话框定位在页面中间，可以在js里面对弹出对话框的位置进行设定，比如：    dialog.style.left = (document.body.clientWidth - 对话框的宽) / 2 + 'px';
        dialog.style.top = (document.body.clientHeight - 对话框的高) / 2 + 'px';    而由于页面窗口的大小是可以调整的，所以若要弹出对话框始终都在页面中间，就要在每调整一次页面大小时，都调整一次弹出对话框的位置，比如添加上这个：window.onresize = function() { 
        dialog.style.left = (document.body.clientWidth - 对话框的宽) / 2 + 'px';
        dialog.style.top = (document.body.clientHeight - 对话框的高) / 2 + 'px';
    };    这里有个问题就是，各个浏览器对于document.body.clientWidth和document.body.clientHeight的取值不完全一致，这里就要对各个浏览器作一一调试了。
        3、若可以的话，也可使弹出对话框可拖动。网上也不有少关于拖动的例子，不过在处理手动时，要注意的还是浏览器的兼容问题。    其它的我也在学习总结之中，如果有更多好的建议也希望大家能互相交流啦~
      

  3.   

    不要硬去玩什么技巧，HTML5已经把IFRAME这个标签取消了。
      

  4.   

    应该是，HTML5也支持iframe，但仅支持src属性。
      

  5.   

    1.遮罩层要是用了div的话，在IE6中遮不住select标签;
    2.我原来也是用js来控制弹出框居中的位置，做法和你说的一样，但是现在我直接用css来控制，效率高一些
    不过你说的隐藏滚动条的方式我还没有试过
      

  6.   

        若要在IE中要遮住select标签，用这个函数：    var hideSelects = function(visibility){
    selects = document.getElementsByTagName('select');
    for(i = 0; i < selects.length; i++) {
    selects[i].style.visibility = visibility;
    }
        };    在show:function(id){}中加上    hideSelects('hidden');在close:function(id){}中加上    hideSelects('visible');    这样便可在IE6里遮住select标签了。至于隐藏滚动条，这个确实值得参考的：
        http://www.eight.nl/static/files/leightbox/