用Div仿showModalDialog模式菜单的效果

徘徊者 · 发表于 2007-7-31 14:24

今天研究了下用javascript结合DIV来制作当前窗体显示模式窗体,并使子窗体不能操作的一个小例子!
这个效果我通过参考赛我网上的个别效果而参考而来,他的比较复杂,因为结合了其他的一些功能,在这里我就是简要的总结下这个效果的一点原理:
第一步:定义一个浮于基层之上的DIV浮动层,默认显示模式为隐藏,相关代码如下:
<div id=\"buySelName\" class=\"modalDiv\" style=\"position:absolute;left:300px; top:140px;z-index:2;display:none;\">
</div>
第二步:定义一个包含iframe的浮动Div对象,宽高都是100%,背景色为白色,设置alpha透明度为50%,主要作用能显示较好的效果;
<div id=\"disableDiv\" style=\"position:absolute; left:0px; top:0px; width:100%; height:100%; z-index:1; background-color:#000000; border: 0px none #000000; FILTER:alpha(opacity=50);display:none;\";><iframe src=\"about:blank\" name=\"hiddenIframe\" width=\"100%\" height=\"100%\"></iframe></div>
第三步:制作输出内容DIV:
<div id=\"objText\" style=\"display:none;\">
<div class=\"modalheader\">
<div class=\"header\">
  <div class=\"mleft\">
  <div class=\"boxheader-text\"><span class=\"b\">显示窗体</span></div>
  </div>
  <div class=\"btnright\"><a href=\"javascript:ShowModal('buy');\"><img src=\"close.gif\" alt=\"关闭\" /></a></div>

</div>
</div>
<div class=\"modalbody\">
网页教学网www.webjx.com欢迎您!!!
</div>
</div>
第四步:编写相关javascript脚本:
<SCRIPT LANGUAGE=\"JavaScript\">

</SCRIPT>
整体效果:
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\">
<HTML>
<HEAD>
<TITLE>用Div仿showModalDialog模式菜单的效果</TITLE>
<META NAME=\"Generator\" CONTENT=\"EditPlus\">
<META NAME=\"Author\" CONTENT=\"\">
<META NAME=\"Keywords\" CONTENT=\"\">
<META NAME=\"Description\" CONTENT=\"\">
<STYLE TYPE=\"text/css\" >
body{
  background:#eaeaea;
  font-size:12px;
}
img{border:0;}
.b{
  font-weight:bold;
  color:white;
}
.modalDiv{
  width:311px;
  height:274px;
  background:url(http://www.17sohoo.com/js/showmodal/modalbg.gif) no-repeat;
}
.modalheader{
  margin:2px;
  padding:2px;
}
.header{
  margin:0;
  padding:0;
}
.mleft{
  width:280px;
  float:left;
}
.mright{
  float:right;
}
.modalbody{
  margin:10px;
  padding:2px;
  color:blue;
}
</STYLE>
</HEAD>
<BODY>
<input type=\"button\" name=\"btnshow\" id=\"btnshow\" value=\"显示隐藏Modal\" onClick=\"ShowModal('buy');\" />
<div id=\"buySelName\" class=\"modalDiv\" style=\"position:absolute;left:300px; top:140px;z-index:2;display:none;\">
</div>
<div id=\"disableDiv\" style=\"position:absolute; left:0px; top:0px; width:100%; height:100%; z-index:1; background-color:#000000; border: 0px none #000000; FILTER:alpha(opacity=50);display:none;\";><iframe src=\"about:blank\" name=\"hiddenIframe\" width=\"100%\" height=\"100%\"></iframe></div>
<div id=\"objText\" style=\"display:none;\">
  <div class=\"modalheader\">
<div class=\"header\">
   <div class=\"mleft\">
      <div class=\"boxheader-text\"><span class=\"b\">显示窗体</span></div>
   </div>
   <div class=\"btnright\"><a href=\"javascript:ShowModal('buy');\"><img src=\"http://www.17sohoo.com/js/showmodal/close.gif\" alt=\"关闭\" /></a></div>
</div>
  </div>
  <div class=\"modalbody\">
希望能大家多多交流!
  </div>
</div>
<SCRIPT LANGUAGE=\"JavaScript\">

</SCRIPT>
</BODY>
</HTML>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

帐号		自动登录	找回密码
密码			成为会员