源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

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

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2007-3-5 00:00:00 | 显示全部楼层 |阅读模式
今天研究了下用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>
效果演示
下载此文件
回复

使用道具 举报

1

主题

2万

回帖

319

积分

中级会员

Rank: 3Rank: 3

积分
319
发表于 2022-11-12 20:24:44 | 显示全部楼层
。。。。。。。。。。。。。。。
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

381

积分

中级会员

Rank: 3Rank: 3

积分
381
发表于 2022-12-4 00:16:55 | 显示全部楼层
人都不在了啊 啊
回复 支持 反对

使用道具 举报

3

主题

2万

回帖

50

积分

注册会员

Rank: 2

积分
50
发表于 2023-2-5 08:18:04 | 显示全部楼层
强烈支持楼主ing……
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-8-24 05:31:01 | 显示全部楼层
的vgdsvsdvdsvdsvds
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

381

积分

中级会员

Rank: 3Rank: 3

积分
381
发表于 2023-9-14 01:39:42 | 显示全部楼层
很不错的样子
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-12-5 13:32:59 | 显示全部楼层
呵呵呵呵呵呵呵a
回复 支持 反对

使用道具 举报

12

主题

2万

回帖

431

积分

中级会员

Rank: 3Rank: 3

积分
431
发表于 2024-5-29 02:55:55 | 显示全部楼层
不错的源码论坛
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

59

积分

注册会员

Rank: 2

积分
59
发表于 2024-6-4 13:55:20 | 显示全部楼层
啪啪啪生怕PSP怕
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

79

积分

注册会员

Rank: 2

积分
79
发表于 2024-7-8 16:24:15 | 显示全部楼层
收下来看看怎么样
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-29 08:32 , Processed in 0.272362 second(s), 44 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表