用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 form 验证函数 弹出对话框形式
Jun 23 Javascript
图像替换新技术 状态域方法
Jan 28 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 Javascript
javascript判断iphone/android手机横竖屏模式的函数
Dec 20 Javascript
Javascript模块化编程详解
Dec 01 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 Javascript
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 Javascript
微信小程序调用摄像头隐藏式拍照功能
Aug 22 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
VUE.js实现动态设置输入框disabled属性
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
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
jquery判断浏览器类型的代码
2012/11/05 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
2012/12/26 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
js继承call()和apply()方法总结
2014/12/08 Javascript
JavaScript中的pow()方法使用详解
2015/06/15 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
Vue项目打包部署到iis服务器的配置方法
2019/10/14 Javascript
Python实现获取网站PR及百度权重
2015/01/21 Python
Python中分数的相关使用教程
2015/03/30 Python
python同时给两个收件人发送邮件的方法
2015/04/30 Python
Python实现二分查找与bisect模块详解
2017/01/13 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
django 数据库连接模块解析及简单长连接改造方法
2019/08/29 Python
python实现画循环圆
2019/11/23 Python
python getopt模块使用实例解析
2019/12/18 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
Python实现从N个数中找到最大的K个数
2020/04/02 Python
用CSS3实现瀑布流布局的示例代码
2017/11/10 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
美国知名户外用品畅销中心:Sierra Trading Post
2016/07/19 全球购物
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
工程造价管理专业大专生求职信
2013/10/06 职场文书
企业趣味活动方案
2014/08/21 职场文书
小学优秀学生评语
2014/12/29 职场文书
千与千寻观后感
2015/06/04 职场文书
结婚幸福感言
2015/08/01 职场文书
《草虫的村落》教学反思
2016/02/20 职场文书
四年级语文教学反思
2016/03/03 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书