| 网站首页 | 业界新闻 | 小组 | 交易 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
ADSL如何秒变专线,公网IP盒子了解一下千里之行 始于足下
共有 334 人关注过本帖
标题:编写一个网页模拟对话框
只看楼主 加入收藏
wstcl
Rank: 1
等 级:新手上路
帖 子:379
专家分:5
注 册:2005-8-17
结帖率:100%
  问题点数:0  回复次数:0   
编写一个网页模拟对话框
  上一节《教你做个在线html编辑器》中我们提到了用div模拟一个对话框,在一些较老的js代码中,我们可以看到有人使用window.showmodaldialog来弹出一个网页也就是模态对话框,然后我们可以获得参数,而在弹出模态对话框后,父窗体无法操作。
  但只有ie支持window.showmodaldialog这个方法。谷歌、火狐等浏览器都不支持(听说曾经也支持过)。也说是在谷歌、火狐等浏览器中运行,什么也不会发生。所以你如果仔细观察发现,在现在的网页中除了alert警告对话框,几乎都是使用div+css来模拟对话框。现在我们也这样做——用div++css来模拟对话框。
  我们知道在css中有一个z-index,当z-index的较大值会覆盖在较小值之上,这一来我们就可以我们就可以将需要在“对话框”中设置的控件放到div中,然后设置一个大一些的z-index值,但问题来了,div外的区域仍然可以操作,不能像window.showmodaldialog,使“对话框”以外的区域无法操作。该怎么办呢?我们可以再建一个div层,它的z-index值介于主要页面和div对话框两者之间,然后将它设为半透明。我们称它为阴影层,这样既能看到主要页面,主要页面也不能被操作到。阴影层的css如下:

.grayout{
position:absolute;
z-index:50;
top:0px;
left:0px;
width:100%;
height:100%;
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity:0.80;

background-color:#999;
text-align:center;
}
  我们还要设置对话框div的css,代码如下:
.center_500{                       
position:absolute;
left:50%;
top:30px;
width:500px;
margin-top:50px;
margin-left:-250px;

background-color:#ccf;
z-index:200;
text-align:center;
}
  注意其中width可以修改成你自己需要的宽度,margin-left是width的一半,取相反数。对了,请再补上这段
html,body
{
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}
  接下去,我们可以使用js+css来控制对话框div和阴影层的display来使用两者出现或隐藏,以模拟打开和关闭功能。
  在网页刚打开时,我们要将两者的display值设为none,也就是隐藏它们。html代码如下
<div class="grayout" style="display:none" id="divshadow">
</div>
<div style="display:none" class="center_500" id="divdia">
</div>
  打开(显示)、关闭(隐藏)的代码分别如下。
function opendivdialog(shadowdivid, contentdivid)
{

contentdivid.style.display = "block";
shadowdivid.style.display = "block";
shadowdivid.style.height = document.body.scrollHeight + 5 + "px";


}

function closedivdialog(shadowdivid, contentdivid)
{

    contentdivid.style.display = "none";
    shadowdivid.style.display = "none";
}

  最后调用两个函数(阴影层是shadowdivid的id值, contentdivid是div对话框的id值)。
  这样,我们就实现了div+css+js来模拟对话框了。
搜索更多相关主题的帖子: 模拟 对话框 div display style 
2019-05-07 16:28







关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.018072 second(s), 8 queries.
Copyright©2004-2019, BCCN.NET, All Rights Reserved