用Div仿showModalDialog模式菜单的效果的代码_Javascript教程-查字典教程网
用Div仿showModalDialog模式菜单的效果的代码
用Div仿showModalDialog模式菜单的效果的代码
发布时间:2017-01-14 来源:查字典编辑
摘要:今天研究了下用javascript结合DIV来制作当前窗体显示模式窗体,并使子窗体不能操作的一个小例子!这个效果我通过参考赛我网上的个别效果...

今天研究了下用javascript结合DIV来制作当前窗体显示模式窗体,并使子窗体不能操作的一个小例子!

这个效果我通过参考赛我网上的个别效果而参考而来,他的比较复杂,因为结合了其他的一些功能,在这里我就是简要的总结下这个效果的一点原理:

第一步:定义一个浮于基层之上的DIV浮动层,默认显示模式为隐藏,相关代码如下:

<divid="buySelName"class="modalDiv">

</div>

第二步:定义一个包含iframe的浮动Div对象,宽高都是100%,背景色为白色,设置alpha透明度为50%,主要作用能显示较好的效果;

<divid="disableDiv";><iframesrc="about:blank"name="hiddenIframe"width="100%"height="100%"></iframe></div>

第三步:制作输出内容DIV:

<divid="objText">

<divclass="modalheader">

<divclass="header">

<divclass="mleft">

<divclass="boxheader-text"><spanclass="b">显示窗体</span></div>

</div>

<divclass="btnright"><ahref="javascript:ShowModal('buy');"><imgsrc="close.gif"alt="关闭"/></a></div>

</div>

</div>

<divclass="modalbody">

希望能大家多多交流!

</div>

</div>

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

<SCRIPTLANGUAGE="JavaScript">

<>

</SCRIPT>

效果演示

下载此文件

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类