用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 textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
jQuery UI AutoComplete 使用说明
Jun 20 Javascript
js函数的引用, 关于内存的开销
Sep 17 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
Jan 16 Javascript
Angular Js文件上传之form-data
Aug 28 Javascript
jquery实现简单合拢与展开网页面板的方法
Sep 01 Javascript
常用javascript表单验证汇总
Jul 20 Javascript
js判断checkbox是否选中个数的方法(超简单)
Aug 19 Javascript
vue注册组件的几种方式总结
Mar 08 Javascript
vue2中引用及使用 better-scroll的方法详解
Nov 15 Javascript
页面内锚点定位及跳转方法总结(推荐)
Apr 24 Javascript
Vue根据条件添加click事件的方式
Nov 09 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数组的一些常见操作汇总
2011/07/17 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
javascript里的条件判断
2007/02/27 Javascript
Ajax,UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
2010/04/01 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
2016/09/14 Javascript
Angular4 中常用的指令入门总结
2017/06/12 Javascript
Vue数组更新及过滤排序功能
2017/08/10 Javascript
js 倒计时(高效率服务器时间同步)
2017/09/12 Javascript
Vue.js中的computed工作原理
2018/03/22 Javascript
浅谈Vue的响应式原理
2019/05/30 Javascript
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
Python中使用SAX解析xml实例
2014/11/21 Python
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
python虚拟环境的安装配置图文教程
2017/10/20 Python
解决python测试opencv时imread导致的错误问题
2019/01/26 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
Python facenet进行人脸识别测试过程解析
2019/08/16 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
Python实现从N个数中找到最大的K个数
2020/04/02 Python
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
Shopee印度尼西亚:东南亚与台湾市场最大电商平台
2018/06/17 全球购物
英文版区域经理求职信
2013/10/23 职场文书
审计主管岗位职责
2014/01/31 职场文书
广告业务员岗位职责
2014/02/06 职场文书
申请吧主发表的感言
2015/08/03 职场文书
高三语文教学反思
2016/02/16 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
六年级作文之预言作文
2019/10/25 职场文书
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server