`
- 浏览:
34901 次
- 性别:
- 来自:
weihai
-
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml">
- <head>
-
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>弹出提示</title>
- <style>
- * {margin:0;padding:0;font-size:12px;}
-
html,body {height:100%;width:100%;}
- #content {background:#FFFFFF;padding:30px;height:100%;}
- #content a {font-size:30px;color:#369;font-weight:700;}
- #alert {border:1px solid #369;width:300px;height:150px;background:#e2ecf5;z-index:1000;position:absolute;display:none;}
- #alert h4 {height:20px;background:#369;color:#fff;padding:5px 0 0 5px;}
- #alert h4 span {float:left;}
- #alert h4 span#close {margin-left:210px;font-weight:500;cursor:pointer;}
- #alert p {padding:12px 0 0 30px;}
- #alert p input {width:120px;margin-left:20px;}
- #alert p input.myinp {border:1px solid #ccc;height:16px;}
- #alert p input.sub {width:60px;margin-left:30px;}
- </style>
-
- </head>
-
- <body>
-
<div id="content">
-
<a href="#">注册</a>
- </div>
-
<div id="alert">
-
<h4><span>现在注册</span><span id="close">关闭</span></h4>
-
<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>
-
<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>
-
<p><input type="submit" value="注册" class="sub" /><input type="reset" value="重置" class="sub" /></p>
- </div>
-
<script type="text/javascript">
-
var myAlert = document.getElementById("alert");
-
var reg = document.getElementById("content").getElementsByTagName("a")[0];
-
var mClose = document.getElementById("close");
-
reg.onclick = function()
- {
-
myAlert.style.display = "block";
-
myAlert.style.position = "absolute";
-
myAlert.style.top = "50%";
-
myAlert.style.left = "50%";
-
myAlert.style.marginTop = "-75px";
-
myAlert.style.marginLeft = "-150px";
-
-
mybg = document.createElement("div");
-
mybg.setAttribute("id","mybg");
-
mybg.style.background = "#000";
-
mybg.style.width = "100%";
-
mybg.style.height = "100%";
-
mybg.style.position = "absolute";
-
mybg.style.top = "0";
-
mybg.style.left = "0";
-
mybg.style.zIndex = "500";
-
mybg.style.opacity = "0.3";
-
mybg.style.filter = "Alpha(opacity=30)";
- document.body.appendChild(mybg);
-
-
document.body.style.overflow = "hidden";
- }
-
-
mClose.onclick = function()
- {
-
myAlert.style.display = "none";
-
mybg.style.display = "none";
- }
- </script>
- </body>
- </html>
分享到：
相关推荐
class=Select_Region_bj 我给了一个灰色半透明的背景样式，后来在Javascript中写onclick事件无论这么写，点击内容区也是会关闭掉遮罩层。我百思不得其解到底怎么样写才能点击内容区不会关闭遮罩
在Windows Forms（Winform）开发中，遮罩层（Mask Layer）通常被用来提供一种半透明的覆盖层，用于在用户界面（UI）上显示等待、加载或提示信息，同时阻止用户与背景界面进行交互。它是一种常见的用户体验设计元素，...
在网页开发中，遮罩层（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 ...
点击按钮弹出悬浮层，层上有数据且可以关闭 页面点击按钮后出现遮罩层，遮罩层上面有...所以选择弹出层，一层遮罩层，一层显示详情层，遮罩层的好处可以让用户在看详情的时候不能操作页面其他位置，防止页面出现错误。
在IT行业中，动态上传文件和遮罩层是前端开发中常见的功能需求，尤其在交互体验设计上占有重要地位。本文将详细阐述“动态上传文件遮罩层”这一主题，包括其概念、实现原理以及js插件的应用。 首先，动态上传文件指...
在ASP.NET中，我们经常会遇到需要实现遮罩层（Modal）的需求，以提供更好的用户体验，例如显示警告信息、加载提示或者弹出窗口等。jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及...
9. **线程安全**：由于遮罩层可能会跨线程操作UI，所以在非UI线程中更改遮罩层的状态时，必须使用`Control.Invoke`或`Control.BeginInvoke`来确保操作是线程安全的。 10. **可配置性**：为了适应不同的场景，你的...
"jsp页面加载之遮罩层"这个主题关注的是在JSP页面加载过程中，如何使用遮罩层来提升用户体验，尤其是在等待页面完全加载时提供一种视觉反馈，让用户知道页面正在处理。 首先，遮罩层通常是一个半透明的div元素，...
在网页设计中，有时我们需要在页面中添加一个遮罩层，以实现如加载动画、弹窗提示或隐藏部分内容的效果。本话题将详细讲解如何在iframe中实现页面的遮罩层功能，结合`right.html`, `main.html`, `left.html`, `top....
在这个例子中，我们需要一个按钮触发遮罩层的显示，并且需要一个遮罩层元素本身： ```html <!DOCTYPE html> , initial-scale=1.0"> <title>JS移动端点击弹出遮罩层 .mask { position: fixed; top: 0; ...
在C#编程中，创建一个自定义的半透明遮罩层是常见的需求，尤其是在开发桌面应用或者游戏界面时，为了实现部分区域的视觉隔离或加载等待效果。本教程将介绍如何利用C#来构建这样的功能。 首先，我们需要理解遮罩层的...
在微信小程序中，全屏遮罩层是一种常见的交互设计元素，通常用于显示加载提示、弹窗确认、模态对话框等场景。它会在用户界面的顶部覆盖一层半透明或者完全不透明的背景，使得用户专注于当前操作而不会被其他元素分散...
在IT行业中，微信跳转和微信遮罩层是常见的移动端应用功能，特别是在电商和营销领域。这个名为"微信跳转 微信遮罩层.zip"的压缩包文件可能包含了一个实现此类功能的源码资源。下面我们将深入探讨这两个概念及其在...
在网页设计和开发中，遮罩层（Mask Layer）是一种常用的技术，用于在用户与页面交互时提供一种视觉效果，比如加载提示、弹窗信息或者背景模糊等。本主题聚焦于"遮罩层js"，这是一个基于jQuery和sliphover库实现的...
在很多场景下，我们希望在弹出`AlertDialog`时，背景界面被一个半透明的遮罩层覆盖，以突出对话框并降低背景界面的干扰。本篇文章将深入探讨如何在Android中自定义实现`AlertDialog`的遮罩层。 首先，理解遮罩层的...
### DIV遮罩层：一种简单高效的工作区域遮罩方法 在网页设计与开发领域，DIV遮罩层是一种常用的UI技术，用于暂时性地遮挡页面的其他部分，从而聚焦用户的注意力于特定区域或操作上。这种方法尤其适用于弹出窗口、...
反之，对于非关键性的提示或信息展示，可能不需要遮罩层，以便用户可以继续浏览或操作主界面。 关于"在调用页面关闭弹出的窗口"，这涉及到事件监听和回调函数。在编程中，我们可以在调用弹出窗口的代码中添加一个回...
在网页设计和开发中，自定义半透明遮罩层是一种常见的视觉效果，它通常用于创建交互式的用户体验，比如加载提示、弹出窗口或模态框背景。遮罩层可以覆盖整个页面或者特定区域，通过半透明黑色或灰色背景，使用户聚焦...
Bootstrap实现遮罩层 参考文档： http://blog.csdn.net/u014175572/article/details/51800168 Bootstrap实现遮罩层 参考文档： http://blog.csdn.net/u014175572/article/details/51800168 Bootstrap实现遮罩层 ...