div 弹出div遮罩层,动态.docx

最近想在gae上做一个博客 ，要用到遮罩层，在网上找个很多感觉不是这么好，所以就自己做了一个。怕麻烦皮肤我就在网上随便下的一个（表骂我 ），看代码吧：Shade.html代码 1. 2. 3. 4. 5. 遮罩层，组件层实例6. 7. 8. 9. 10. 11. 该遮罩层已经在FF3.5,IE7,Opera测试通过，在IE6中有一些小bug：无法使遮罩层透明显示，组件层无法固定定位12. 以管理员登录为例子主要配置文件为shade.js，config.js中存放组件的配置，这个文件需要使用者自己配置。13. Author：CindyQQ：283502037JavaEye:14. 15. 16. 17. 下面是主要的js：Shade.js代码 1. /得到浏览器显示的屏幕高度2. document.getViewportHeight=function()3. if(window.innerHeight!=window.undefined)returnwindow.innerHeight;4. if(patMode=CSS1Compat)returndocument.documentElement.clientHeight;5. if(document.body)returndocument.body.clientHeight;6. returnwindow.undefined;7. 8. /得到浏览器显示的屏幕宽度9. document.getViewportWidth=function()10. if(window.innerWidth!=window.undefined)returnwindow.innerWidth;11. if(patMode=CSS1Compat)returndocument.documentElement.clientWidth;12. if(document.body)returndocument.body.clientWidth;13. 14. /*15. *遮罩层，组件的显示及隐藏16. */17. Shade=18. mask:null,19. container:null,20. isIE6:null,21. init:function()22. /判断浏览器是否是ie6或其以下版本23. varbrsVersion=parseInt(window.navigator.appVersion.charAt(0),10);24. if(brsVersion-1)25. this.isIE6=true;26. else27. this.isIE6=false;28. 29. /将遮罩层加入body30. varpopmask=document.createElement(div);31. popmask.id=mask;32. document.body.appendChild(popmask);33. this.mask=document.getElementById(mask);34. 35. /将组件边框加入body36. varpopcont=document.createElement(div);37. popcont.id=popupContainer;38. popcont.innerHTML=+39. +40. +41. +42. +43. +44. dd;45. document.body.appendChild(popcont);46. this.container=document.getElementById(popupContainer);47. ,48. setMaskSize:function()49. vartheBody=document.body;50. 51. varfullHeight=document.getViewportHeight();52. varfullWidth=document.getViewportWidth();53. 54. if(fullHeighttheBody.scrollHeight)55. this.popHeight=fullHeight;56. else57. this.popHeight=theBody.scrollHeight;58. 59. 60. if(fullWidththeBody.scrollWidth)61. this.popWidth=fullWidth;62. else63. this.popWidth=theBody.scrollWidth;64. 65. 66. this.mask.style.height=this.popHeight+px;67. this.mask.style.width=this.popWidth+px;68. ,69. toCenter:function(conf)70. vars=this.container.style;71. s.left=(document.getViewportWidth()-conf.width)/2+px;72. s.top=(document.getViewportHeight()-conf.height)/2+px;73. ,74. show:function(conf)75. /初始化76. this.init();77. /设置遮罩层的长度和宽度78. this.setMaskSize()79. /设置组件的标题80. document.getElementById(popupTitle).innerHTML=conf.title;81. /设置组件的长和宽82. this.container.style.width=conf.width+px;83. this.container.style.height=conf.height+px;84. varframe=document.getElementById(popupFrame);85. frame.style.width=(conf.width-4)+px;86. frame.style.height=(conf.height-31)+px;87. /将组件居中显示88. this.toCenter(conf);89. /设置组件内容90. frame.innerHTML=conf.templete;91. ,92. hide:function()93. /删除遮罩层94. document.body.removeChild(this.mask);95. /删除组件层96. document.body.removeChild(this.container);97. 98. 下面是关于组件里显示内容的配置：Config.js代码 1. varlogin=2. /组件标题3. title:管理员登录,4. /组件的宽度5. width:300,6. /组件的高度7. height:190,8. /组件里面的内容9. templete:+10. +11. +12. 账号：+13. +14. *您的账号+15. +16. +17. 密码：+18. +19. *您的密码+20. +21. +22. 正在登录.+23. +24. +25. 26. Shade.css代码 1. charsetutf-8;2. /*CSSDocument*/3. #popupContainer4. position:fixed!important;5. position:absolute;6. z-index:201;7. 8. #popupInner9. border:2pxsolid#000000;10. background-color:#ffffff;11. 12. 13. #popupFrame14. text-align:center;15. margin:0px;16. width:100%;17. height:100%;18. position:relative;19. z-index:202;20. background-color:#FFFFFF;21. 22. #popupTitleBar23. background-color:#486CAE;24. color:#ffffff;25. font-weight:bold;26. height:18px;27. padding:5px;28. border-bottom:2pxsolid#000000;29. border-top:1pxsolid#78A3F2;30. border-left:1pxsolid#78A3F2;31. border-right:1pxsolid#204095;32. position:relative;33. z-index:203;34. 35. #popupTitle36. float:left;37. font-size:15px;38. 39. #popupControls40. float:right;41. cursor:pointer;42. cursor:hand;43. 44. #mask45. position:fixed!important;46. position:absolute;47. opacity:.4;48. filter:alpha(opacity=40);49. left:0px;50. top:0px;51. background-color:#999999;52. 53. 54. 55. /*login*/56. .input_text57. height:18px;58. border:1pxsolid#CCC;59. background-color:#FFF;60. width:120px;61. margin:5px;62. padding:2px;63. 64. 65. .input_text:hover66. solid#999;67. background-color:#FFFFCC;68. 69. 70. .formClass71. align:center;72. padding-top:10px;73. padding-bottom:5px;74. 75. table76. margin-left:auto;77. margin-right:auto;78. 79. .point_out80. font-size:12px;81. color:#FF0000;82. 83. 84. .inupt_button85. height:25px;86. width:60px;87. margin-top:5px;88. margin-right:10px;89. margin-bottom:5px;90. margin-left:10px;91. 92. .lab93. text-align:right;94. vertical-align:middle;95. margin:0px;96. font-size:14px;97. font-family:黑体;98. 因为我要做的应用没有select标签所以就没有添加select的判断问题，如果有人感兴趣可以自己试着做一下关于用法也很简单，源码我已经上传了下面是效果： shade.rar (10.7 KB) 下载次数: 1044 查看图片附件声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。 锁定老帖子 主题：Cindy_Lee 实现的遮罩层的增强版本,增加了增加拖拽,浏览器窗口缩放时遮罩层自动缩放等功能 精华帖 (0) : 良好帖 (1) : 新手帖 (0) : 隐藏帖 (1)作者 正文 vb2005xu 等级: 性别: 文章: 571 积分: 310 来自: 北京 发表时间：2009-10-02 收藏 猎头职位: 北京: ITeye网站诚聘产品交互设计 相关文章: 做了一个遮罩层 工作中的JS使用小结 jQuery 实现的遮罩层效果推荐群组: javascript研究小组 更多相关推荐 代码如下所示,代码已经被我重构. 写的不好,请见谅.config_VB2005XU.jsJs代码 1. /JavaScriptDocument2. varlogin_VB2005XU=3. /组件标题4. title:管理员登录,5. /组件的宽度6. width:300,7. /组件的高度8. height:190,9. /组件里面的内容10. templete:+11. +12. +13. 账号：+14. +15. *您的账号+16. +17. +18. 密码：+19. +20. *您的密码+21. +22. +23. 正在登录.+24. +25. +26. 27. Shade_VB2005XU.jsJs代码 1. /得到浏览器显示的屏幕高度2. document.getViewportHeight=function()3. if(window.innerHeight!=window.undefined)returnwindow.innerHeight;4. if(patMode=CSS1Compat)returndocument.documentElement.clientHeight;5. if(document.body)returndocument.body.clientHeight;6. returnwindow.undefined;7. 8. /得到浏览器显示的屏幕宽度9. document.getViewportWidth=function()10. if(window.innerWidth!=window.undefined)returnwindow.innerWidth;11. if(patMode=CSS1Compat)returndocument.documentElement.clientWidth;12. if(document.body)returndocument.body.clientWidth;13. 14. /*15. *遮罩层，组件的显示及隐藏16. */17. Shade_VB2005XU=18. mask:null,19. container:null,20. isIE6:null,21. init:function(conf)22. /判断浏览器是否是ie6或其以下版本23. varbrsVersion=parseInt(window.navigator.appVersion.charAt(0),10);24. if(brsVersion-1)25. this.isIE6=true;26. else27. this.isIE6=false;28. 29. /将遮罩层加入body30. varpopmask=document.createElement(div);31. popmask.id=mask;32. document.body.appendChild(popmask);33. this.mask=document.getElementById(mask);34. this.mask.style.display=none;35. 36. /将组件边框加入body37. varpopcont=document.createElement(div);38. popcont.id=popupContainer;39. popcont.innerHTML=+40. +41. +42. +43. +44. +45. dd;46. document.body.appendChild(popcont);47. this.container=document.getElementById(popupContainer);48. this.container.style.display=none;49. 50. 51. /加载自定义设置的内容-by色色-这些应该属于初始化的内容52. 53. /设置组件的标题54. document.getElementById(popupTitle).innerHTML=conf.title;55. /设置组件的长和宽56. this.container.style.width=conf.width+px;57. this.container.style.height=conf.height+px;58. varframe=document.getElementById(popupFrame);59. frame.style.width=(conf.width-4)+px;60. frame.style.height=(conf.height-31)+px;61. 62. /设置组件内容63. frame.innerHTML=conf.templete;64. 65. this.render(conf);66. this.enDrag();67. 68. varShade_this=this;/传递this参数,到浏览器窗体改变事件69. Shade_this.conf=conf;70. 71. window.onresize=function()72. if(Shade_this.container)73. Shade_this.render(Shade_this.conf);74. 75. ;76. ,77. /*增加拖动功能*/78. enDrag:function()79. varpopupTitleBar=document.getElementById(popupTitleBar);80. popupTitleBar.style.cursor=move;81. Drag.init(popupTitleBar,this.container);82. ,83. render:function(conf)84. this.setMaskSize();85. this.toCenter(conf);86. ,87. 88. /设置遮罩层的长度和宽度89. setMaskSize:function()90. vartheBody=document.body;91. 92. varfullHeight=document.getViewportHeight();93. varfullWidth=document.getViewportWidth();94. 95. /Determinewhatsbigger,scrollHeightorfullHeight/width96. if(fullHeighttheBody.scrollHeight)97. this.popHeight=fullHeight;98. else99. this.popHeight=theBody.scrollHeight;100. 101. 102. if(fullWidththeBody.scrollWidth)103. this.popWidth=fullWidth;104. else105. this.popWidth=theBody.scrollWidth;106. 107. 108. this.mask.style.height=this.popHeight+px;109. this.mask.style.width=this.popWidth+px;110. ,111. toCenter:function(conf)112. vars=this.container.style;113. s.left=(document.getViewportWidth()-conf.width)/2+px;114. s.top=(document.getViewportHeight()-conf.height)/2+px;115. ,116. show:function()117. /if()118. this.container.style.display=this.mask.style.display=;119. ,120. hide:function()121. /删除遮罩层122. document.body.removeChild(this.mask);123. /删除组件层124. document.body.removeChild(this.container);125. 126. Html代码 1. 2. 3. 4. 5. 遮罩层，组件层实例6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 该遮罩层已经在FF3.5,IE7,Opera测试通过，在IE6中有一些小bug：无法使遮罩层透明显示，组件层无法固定定位18. 以管理员登录为例子主要配置文件为shade.js，config.js中存放组件的配置，这个文件需要使用者自己配置。19. 20. Author：CindyQQ：283502037JavaEye:21. 22. 23. 24. 25. 色色增强版增加拖拽,浏览器窗口缩放时遮罩层自动缩放等功能26. 27. 该遮罩层已经在FF2.0,IE6,Opera测试通过，28. 以管理员登录为例子主要配置文件为shade.js，config.js中存放组件的配置，这个文件需要使用者自己配置。29. 30. Author：色色vb2005xuQQ：中国PHP联盟群管理员JavaEye:31. 32. 33. 34. 35. 36. 效果图示: 遮罩层-色色增强版.zip (13.8 KB) 下载次数: 1067 查看图片附件声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。 推荐链接 20-30万急聘多名天才Java/MTA软件工