用Div仿showModalDialog模式菜单的效果的代码


Posted in Javascript onMarch 05, 2007

今天研究了下用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">
  希望能大家多多交流!
</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>
效果演示
用Div仿showModalDialog模式菜单的效果的代码下载此文件

Javascript 相关文章推荐
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
Dec 06 Javascript
js中的this关键字详解
Sep 25 Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 Javascript
node.js使用cluster实现多进程
Mar 17 Javascript
通过正则表达式获取url中参数的简单实现
Jun 07 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 Javascript
vue实现在表格里,取每行的id的方法
Mar 09 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 Javascript
送你43道JS面试题(收藏)
Jun 17 Javascript
js实现随机点名器精简版
Jun 29 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
Oct 02 Javascript
HTML-CSS群中单选引发的“事件”
Mar 05 #Javascript
用javascript实现页面打印的三种方法
Mar 05 #Javascript
一个可以显示阴历的JS代码
Mar 05 #Javascript
JavaScript实现Sleep函数的代码
Mar 04 #Javascript
Javascript中暂停功能的实现代码
Mar 04 #Javascript
参考:关于Javascript中实现暂停的几篇文章
Mar 04 #Javascript
插件:检测javascript的内存泄漏
Mar 04 #Javascript
You might like
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
js jquery做的图片连续滚动代码
2008/01/06 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
2013/10/24 Javascript
IE浏览器中图片onload事件无效的解决方法
2014/04/29 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
跟我学习javascript的最新标准ES6
2015/11/20 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
深入理解JS DOM事件机制
2016/08/06 Javascript
Bootstrap table的使用方法
2016/11/02 Javascript
详解webpack 多入口配置
2017/06/16 Javascript
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
2017/08/23 Javascript
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
JS module的导出和导入的实现代码
2019/02/25 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
python实现封装得到virustotal扫描结果
2014/10/05 Python
Python的Flask框架中web表单的教程
2015/04/20 Python
使用SAE部署Python运行环境的教程
2015/05/05 Python
python通过函数属性实现全局变量的方法
2015/05/16 Python
Python中的hypot()方法使用简介
2015/05/18 Python
解读Django框架中的低层次缓存API
2015/07/24 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
Python实现感知机(PLA)算法
2017/12/20 Python
python 调用有道api接口的方法
2019/01/03 Python
python无序链表删除重复项的方法
2020/01/17 Python
Python pymysql模块安装并操作过程解析
2020/10/13 Python
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
统计每一学生的平均成绩
2014/06/06 面试题
《云房子》教学反思
2014/04/20 职场文书
青春励志演讲稿范文
2014/08/25 职场文书
大学文艺委员竞选稿
2015/11/19 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
物业管理交接协议书
2016/03/24 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书