今天研究了下用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\">
<!--
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>
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行] |