用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读取中文COOKIE的解决办法
Feb 15 Javascript
jQuery 研究心得 取得属性的值
Nov 30 Javascript
小议Javascript中的this指针
Mar 18 Javascript
js Date概念详细介绍
Nov 22 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
Dec 13 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
Nov 17 Javascript
JavaScript中数组Array.sort()排序方法详解
Mar 01 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
原生javascript实现连连看游戏
Jan 03 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
Apr 24 Javascript
初学node.js中实现删除用户路由
May 27 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_XLSXWriter代替PHPExcel的方法示例
2017/07/16 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
JavaScript的面向对象(二)
2006/11/09 Javascript
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
js获得网页背景色和字体色的方法
2014/03/21 Javascript
JS获得选取checkbox整行数据的方法
2015/01/28 Javascript
JavaScript实现文字跟随鼠标特效
2015/08/06 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
微信小程序WebSocket实现聊天对话功能
2018/07/06 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
使用python提取html文件中的特定数据的实现代码
2013/03/24 Python
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
Python动态语言与鸭子类型详解
2019/07/01 Python
python实现连连看游戏
2020/02/14 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
Python不支持 i ++ 语法的原因解析
2020/07/22 Python
python如何实现递归转非递归
2021/02/25 Python
HTML5+lufylegend实现游戏中的卷轴
2016/02/29 HTML / CSS
德国化妆品和天然化妆品网上商店:kosmetikfuchs.de
2017/06/09 全球购物
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
股权收购意向书
2014/04/01 职场文书
租房协议书怎么写
2014/04/10 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书