`

遮罩层 非原创

阅读更多
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  2. <html xmlns="http://www.w3.org/1999/xhtml">   
  3. <head>   
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   
  5. <title>弹出提示</title>   
  6. <style>   
  7. * {margin:0;padding:0;font-size:12px;}   
  8. html,body {height:100%;width:100%;}  
  9. #content {background:#FFFFFF;padding:30px;height:100%;}  
  10. #content a {font-size:30px;color:#369;font-weight:700;}  
  11. #alert {border:1px solid #369;width:300px;height:150px;background:#e2ecf5;z-index:1000;position:absolute;display:none;}  
  12. #alert h4 {height:20px;background:#369;color:#fff;padding:5px 0 0 5px;}  
  13. #alert h4 span {float:left;}  
  14. #alert h4 span#close {margin-left:210px;font-weight:500;cursor:pointer;}  
  15. #alert p {padding:12px 0 0 30px;}  
  16. #alert p input {width:120px;margin-left:20px;}  
  17. #alert p input.myinp {border:1px solid #ccc;height:16px;}  
  18. #alert p input.sub {width:60px;margin-left:30px;}   
  19. </style>   
  20.   
  21. </head>   
  22.   
  23. <body>   
  24. <div id="content">   
  25. <a href="#">注册</a>   
  26. </div>   
  27. <div id="alert">   
  28. <h4><span>现在注册</span><span id="close">关闭</span></h4>   
  29. <p><label> 用户名</label><input type="text" class="myinp" onmouseover="this.style.border='1px solid #f60'" onfoucs="this.style.border='1px solid #f60'" onblur="this.style.border='1px solid #ccc'" /></p>   
  30. <p><label> 密 码</label><input type="password" class="myinp" onmouseover="this.style.border='1px solid #f60'" onfoucs="this.style.border='1px solid #f60'" onblur="this.style.border='1px solid #ccc'" /></p>   
  31. <p><input type="submit" value="注册" class="sub" /><input type="reset" value="重置" class="sub" /></p>   
  32. </div>   
  33. <script type="text/javascript">   
  34. var myAlert = document.getElementById("alert");   
  35. var reg = document.getElementById("content").getElementsByTagName("a")[0];   
  36. var mClose = document.getElementById("close");   
  37. reg.onclick = function()   
  38. {   
  39. myAlert.style.display = "block";   
  40. myAlert.style.position = "absolute";   
  41. myAlert.style.top = "50%";   
  42. myAlert.style.left = "50%";   
  43. myAlert.style.marginTop = "-75px";   
  44. myAlert.style.marginLeft = "-150px";   
  45.   
  46. mybg = document.createElement("div");   
  47. mybg.setAttribute("id","mybg");   
  48. mybg.style.background = "#000";   
  49. mybg.style.width = "100%";   
  50. mybg.style.height = "100%";   
  51. mybg.style.position = "absolute";   
  52. mybg.style.top = "0";   
  53. mybg.style.left = "0";   
  54. mybg.style.zIndex = "500";   
  55. mybg.style.opacity = "0.3";   
  56. mybg.style.filter = "Alpha(opacity=30)";   
  57. document.body.appendChild(mybg);   
  58.   
  59. document.body.style.overflow = "hidden";   
  60. }   
  61.   
  62. mClose.onclick = function()   
  63. {   
  64. myAlert.style.display = "none";   
  65. mybg.style.display = "none";   
  66. }   
  67. </script>   
  68. </body>   
  69. </html>  
分享到:
评论

相关推荐

    点击遮罩层的背景关闭遮罩层

    class=Select_Region_bj 我给了一个灰色半透明的背景样式,后来在Javascript中写onclick事件无论这么写,点击内容区也是会关闭掉遮罩层。我百思不得其解到底怎么样写才能点击内容区不会关闭遮罩

    winform实现遮罩层效果

    在Windows Forms(Winform)开发中,遮罩层(Mask Layer)通常被用来提供一种半透明的覆盖层,用于在用户界面(UI)上显示等待、加载或提示信息,同时阻止用户与背景界面进行交互。它是一种常见的用户体验设计元素,...

    js打开关闭遮罩层

    在网页开发中,遮罩层(Mask Layer)是一种常见的用户界面元素,用于暂时遮盖页面内容,引导用户注意力或者在加载数据时提供视觉反馈。在本主题中,我们将深入探讨如何使用JavaScript来实现遮罩层的打开和关闭,并...

    漂亮遮罩层css+div

    漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div ...

    页面点击按钮后出现遮罩层,遮罩层上面有其他内容可显示,包含关闭遮罩层按钮

    点击按钮弹出悬浮层,层上有数据且可以关闭 页面点击按钮后出现遮罩层,遮罩层上面有...所以选择弹出层,一层遮罩层,一层显示详情层,遮罩层的好处可以让用户在看详情的时候不能操作页面其他位置,防止页面出现错误。

    动态上传文件遮罩层

    在IT行业中,动态上传文件和遮罩层是前端开发中常见的功能需求,尤其在交互体验设计上占有重要地位。本文将详细阐述“动态上传文件遮罩层”这一主题,包括其概念、实现原理以及js插件的应用。 首先,动态上传文件指...

    asp.net 遮罩层 asp.net 遮罩层

    在ASP.NET中,我们经常会遇到需要实现遮罩层(Modal)的需求,以提供更好的用户体验,例如显示警告信息、加载提示或者弹出窗口等。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及...

    C# WinForm遮罩层

    9. **线程安全**:由于遮罩层可能会跨线程操作UI,所以在非UI线程中更改遮罩层的状态时,必须使用`Control.Invoke`或`Control.BeginInvoke`来确保操作是线程安全的。 10. **可配置性**:为了适应不同的场景,你的...

    C# 自定义半透明遮罩层

    在C#编程中,创建一个自定义的半透明遮罩层是常见的需求,尤其是在开发桌面应用或者游戏界面时,为了实现部分区域的视觉隔离或加载等待效果。本教程将介绍如何利用C#来构建这样的功能。 首先,我们需要理解遮罩层的...

    jsp页面加载之遮罩层

    "jsp页面加载之遮罩层"这个主题关注的是在JSP页面加载过程中,如何使用遮罩层来提升用户体验,尤其是在等待页面完全加载时提供一种视觉反馈,让用户知道页面正在处理。 首先,遮罩层通常是一个半透明的div元素,...

    在iframe 中页面中设置遮罩遮罩层

    在网页设计中,有时我们需要在页面中添加一个遮罩层,以实现如加载动画、弹窗提示或隐藏部分内容的效果。本话题将详细讲解如何在iframe中实现页面的遮罩层功能,结合`right.html`, `main.html`, `left.html`, `top....

    JS移动端点击弹出遮罩层

    在这个例子中,我们需要一个按钮触发遮罩层的显示,并且需要一个遮罩层元素本身: ```html &lt;!DOCTYPE html&gt; , initial-scale=1.0"&gt; &lt;title&gt;JS移动端点击弹出遮罩层 .mask { position: fixed; top: 0; ...

    微信小程序全屏遮罩层代码

    在微信小程序中,全屏遮罩层是一种常见的交互设计元素,通常用于显示加载提示、弹窗确认、模态对话框等场景。它会在用户界面的顶部覆盖一层半透明或者完全不透明的背景,使得用户专注于当前操作而不会被其他元素分散...

    微信跳转 微信遮罩层.zip

    在IT行业中,微信跳转和微信遮罩层是常见的移动端应用功能,特别是在电商和营销领域。这个名为"微信跳转 微信遮罩层.zip"的压缩包文件可能包含了一个实现此类功能的源码资源。下面我们将深入探讨这两个概念及其在...

    遮罩层js代码

    在网页设计和开发中,遮罩层(Mask Layer)是一种常用的技术,用于在用户与页面交互时提供一种视觉效果,比如加载提示、弹窗信息或者背景模糊等。本主题聚焦于"遮罩层js",这是一个基于jQuery和sliphover库实现的...

    AlertDialog对话框 实现遮罩层

    在很多场景下,我们希望在弹出`AlertDialog`时,背景界面被一个半透明的遮罩层覆盖,以突出对话框并降低背景界面的干扰。本篇文章将深入探讨如何在Android中自定义实现`AlertDialog`的遮罩层。 首先,理解遮罩层的...

    DIV遮罩层 div div

    ### DIV遮罩层:一种简单高效的工作区域遮罩方法 在网页设计与开发领域,DIV遮罩层是一种常用的UI技术,用于暂时性地遮挡页面的其他部分,从而聚焦用户的注意力于特定区域或操作上。这种方法尤其适用于弹出窗口、...

    各种功能的弹出窗口 带遮罩层/不带带遮罩层

    反之,对于非关键性的提示或信息展示,可能不需要遮罩层,以便用户可以继续浏览或操作主界面。 关于"在调用页面关闭弹出的窗口",这涉及到事件监听和回调函数。在编程中,我们可以在调用弹出窗口的代码中添加一个回...

    自定义半透明遮罩层

    在网页设计和开发中,自定义半透明遮罩层是一种常见的视觉效果,它通常用于创建交互式的用户体验,比如加载提示、弹出窗口或模态框背景。遮罩层可以覆盖整个页面或者特定区域,通过半透明黑色或灰色背景,使用户聚焦...

    Bootstrap实现遮罩层

    Bootstrap实现遮罩层 参考文档: http://blog.csdn.net/u014175572/article/details/51800168 Bootstrap实现遮罩层 参考文档: http://blog.csdn.net/u014175572/article/details/51800168 Bootstrap实现遮罩层 ...

Global site tag (gtag.js) - Google Analytics