用Div仿showModalDialog模式菜单的效果

大 | 中 | 小
[2007/07/30 22:23 | 分类: Html技术 | by gdgzboy ]
[此文来源于互联网，牛C网只负责收集整理]

今天研究了下用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">
  牛C网www.webjx.com欢迎您!!!
</div>
</div>

第四步:编写相关javascript脚本:

<SCRIPT LANGUAGE="JavaScript">
<!--
function ShowModal(dname)
{
  var buyDiv=document.getElementById(dname 'SelName');
  var objDiv=document.getElementById('objText');
  var disable=document.getElementById('disableDiv');
  if(buyDiv.style.display=='none')
  {
   buyDiv.style.display='block';
   disable.style.display='block';
   buyDiv.innerHTML=objDiv.innerHTML;
  }else{
   buyDiv.style.display='none';
   disable.style.display='none';
  }
}
//-->
</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"><!--  function ShowModal(dname)  {    var buyDiv=document.getElementById(dname 'SelName');    var objDiv=document.getElementById('objText');    var disable=document.getElementById('disableDiv');    if(buyDiv.style.display=='none')    {      buyDiv.style.display='block';      disable.style.display='block';      buyDiv.innerHTML=objDiv.innerHTML;    }else{      buyDiv.style.display='none';      disable.style.display='none';    }  }//--></SCRIPT></BODY></HTML>

    

    

            

作者：gdgzboy@牛C网
地址：http://www.niuc.net/post/3574/
版权所有。转载时必须以链接形式注明作者和原始出处及本声明！

Tags: , , , ,
评论(0) | 引用(0) | 阅读(141)
发表评论
昵称 [注册]
密码 游客无需密码
网址
电邮
打开HTML 打开UBB 打开表情 隐藏 记住我