用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 相关文章推荐
javascript中的107个基础知识收集整理 推荐
Mar 29 Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
Feb 23 Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
Jan 06 Javascript
使用C++为node.js写扩展模块
Apr 22 Javascript
Vue组件BootPage实现简单的分页功能
Sep 12 Javascript
JS正则表达式判断有效数实例代码
Mar 13 Javascript
JS 实现分页打印功能
May 16 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
vue生命周期与钩子函数简单示例
Mar 13 Javascript
原生js实现随机点名功能
Nov 05 Javascript
在antd Table中插入可编辑的单元格实例
Oct 28 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
全世界最小的php网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
PHP中使用php5-ffmpeg撷取视频图片实例
2015/01/07 PHP
Laravel 5 学习笔记
2015/03/06 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
在线编辑器的实现原理(兼容IE和FireFox)
2007/03/09 Javascript
Js 获取HTML DOM节点元素的方法小结
2009/04/24 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
jQuery中:password选择器用法实例
2015/01/03 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
2017/04/11 Javascript
微信小程序支付前端源码
2018/08/29 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
python中的闭包用法实例详解
2015/05/05 Python
Python实现网站注册验证码生成类
2017/06/08 Python
python实现图书借阅系统
2019/02/20 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
Hashtable 添加内容的方式有哪几种,有什么区别?
2012/04/08 面试题
C#怎么让一个窗口居中显示?
2015/10/20 面试题
介绍一下EJB的分类及其各自的功能及应用
2016/08/23 面试题
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
服装店营销方案
2014/03/10 职场文书
职务聘任书范文
2014/03/29 职场文书
教师求职信范文
2014/05/24 职场文书
营销计划书
2015/01/17 职场文书
国家助学金感谢信
2015/01/21 职场文书
幼儿园教师个人总结
2015/02/05 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
小孩不笨观后感
2015/06/03 职场文书
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技