<!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:#f8f8f8;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>
分享到：
相关推荐
Div 对话框 可移动 可设遮罩层 可以同时打开多个对话框，JS源代码
"最中间弹出对话框,遮罩层 可以拖动"这个标题所描述的功能是一种常见且实用的用户交互设计，通常用于提醒、确认或者提供更多信息。在这个场景中，我们使用jQuery库来实现这一功能，它是一个广泛使用的JavaScript库，...
在本文中，我们将深入探讨如何利用JavaScript实现一个弹出div窗口，包括支持遮罩、拖动、嵌入页面和换肤等功能。 首先，让我们了解“弹出窗口”或“弹出层”的概念。在网页设计中，弹出窗口通常指的是不依赖浏览器...
在网页设计中，创建一个点击弹出的div圆角遮罩层是常见的交互效果，它通常用于展示模态对话框、提示信息或者加载内容。这个功能的实现涉及到HTML、CSS和可能的JavaScript技术。下面我们将详细讲解如何创建这样一个...
本文主要介绍如何利用JavaScript与HTML5实现具有半透明效果的遮罩层弹框。遮罩层弹框是前端开发中常见的交互效果，它通常用于在用户进行某些操作时，显示在页面上层的半透明遮罩，以提示用户当前状态或者用于表单...
创建基本的div对话框结构： ```html <div id="dialogBox"> 对话框标题 这里是对话框的内容。 关闭 </div> ``` 接着，我们需要使用CSS来设置对话框的样式，包括位置、大小、边框、背景等。例如，我们可以使用绝对...
总的来说，这个jQuery遮罩背景弹出层对话框插件为开发者提供了一个便捷的工具，无需从零开始编写复杂的JavaScript和CSS，只需简单引用和调用即可实现在网页上创建具有专业感的交互式弹出层。对于学习和理解jQuery...
在JavaScript编程领域中，创建可拖动窗口控件和弹出提示框是常见的需求，尤其在Web应用中，用户交互的界面设计至关重要。本资源提供了一种解决方案，它是一个基于JavaScript和CSS的可定制对话框控件，允许开发者创建...
在网页开发中，有时我们需要与用户进行交互，这时页面弹出的对话框就显得尤为重要。对话框可以用于提示信息、确认操作或者获取用户输入。在本主题中，我们将深入探讨如何利用JavaScript和HTML来实现页面上的各种...
本文将深入探讨如何使用JavaScript实现弹出div，以及如何返回原来的页面。 首先，我们需要理解什么是弹出div。在HTML中，div是一个常用的布局元素，可以用来组织和分隔内容。在JavaScript中，通过改变CSS样式，我们...
在网页设计和开发中，`div` 弹出框、对话框和模态窗口是创建交互式用户体验的重要组成部分。这些元素通常用于显示警告、询问用户输入或者提供额外的信息，而不会中断用户对主要页面的浏览。本文将深入探讨这些概念，...
在网页设计中，"div 弹出层遮罩 兼容各大浏览器" 是一个常见的交互效果，用于创建一种用户友好的界面体验。当用户点击某个按钮时，一个半透明的遮罩层会覆盖整个页面，突出显示弹出的窗口或信息，而其他部分则变得不...
在讨论如何使用JavaScript弹出div并显示遮罩层之前，我们首先要理解几个核心概念：遮罩层的作用、如何使用JavaScript创建和控制DOM元素以及如何处理用户交互事件。 遮罩层通常被用于遮挡页面的一部分内容，从而达到...
本文将深入探讨如何使用jQuery实现一个对话框效果，即在弹出对话框时，背景变暗并且用户无法操作背景内容，以提供更好的用户体验。 首先，要实现这种效果，我们需要引入jQuery库到我们的HTML文件中。可以使用CDN...
js 弹出对话框(遮罩)透明,可拖动的简单实例 <html> <head> [removed] function sAlert(txt) { //var eSrc=(document.all)?window.event.srcElement:arguments[1]; var shield = document....
4. **触发对话框**：在需要弹出对话框的事件中调用`$("#dialog").dialog("open")`。比如，当点击某个按钮时： ```javascript $("#openButton").click(function() { $("#dialog").dialog("open"); }); ``` 在...
在网页设计中，"div_css_js弹出层有遮罩"是一个常见的交互设计技术，用于创建弹出式窗口或对话框，通常用于显示通知、表单、广告等。这一技术结合了HTML的`<div>`元素、CSS样式以及JavaScript/jQuery的动态效果，以...
这种效果通常应用于需要显示详细信息、模态对话框或菜单等场景，用户点击某一元素后，一个半透明的遮罩层会覆盖整个页面，同时一个浮动层（通常包含更多信息或功能）在屏幕中央出现。以下是对这个主题的详细解释： ...
在本例中，EasyUI的对话框组件可能被用于创建弹出框，其内置的遮罩功能可以轻松实现对父页面的遮罩效果。 总的来说，"iframe弹出框遮罩父类页面"是一个常见的前端交互需求，通过合理使用`iframe`、JavaScript和CSS...
在这个模态对话框中，div被用作对话框的基础结构，通过CSS来定制其样式，如背景颜色、边框、透明度等，使其看起来像一个弹出的窗口。 3. **模态窗口**：模态窗口在用户界面设计中是指一种阻止用户与页面其余部分...