转载：http://www.cnblogs.com/yichengbo/archive/2012/03/12/2392630.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery弹出层效果</title>
<meta content="网页特效,特效代码,jQuery,css特效,Js代码,广告幻灯,图片切换" name="keywords" />
<meta content="jQuery弹出层效果，有关闭按钮，代码简单易懂，你可以随意修改弹出层的参数。" name="description" />
<script src="/uploads/common/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
border: 16px solid lightblue;
background-color: white;
z-index:1002;
overflow: auto;
}
.white_content_small {
display: none;
position: absolute;
top: 20%;
left: 30%;
width: 40%;
height: 50%;
border: 16px solid lightblue;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
<script type="text/javascript">
//弹出隐藏层
function ShowDiv(show_div,bg_div){
document.getElementById(show_div).style.display='block';
document.getElementById(bg_div).style.display='block' ;
var bgdiv = document.getElementById(bg_div);
bgdiv.style.width = document.body.scrollWidth;
// bgdiv.style.height = $(document).height();
$("#"+bg_div).height($(document).height());
};
//关闭弹出层
function CloseDiv(show_div,bg_div)
{
document.getElementById(show_div).style.display='none';
document.getElementById(bg_div).style.display='none';
};
</script>
</head>
<body>
<input id="Button1" type="button" value="点击弹出层" onclick="ShowDiv('MyDiv','fade')" />
<!--弹出层时背景层DIV-->
<div id="fade" class="black_overlay">
</div>
<div id="MyDiv" class="white_content">
<div style="text-align: right; cursor: default; height: 40px;">
<span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>
</div>
目前来说，我还是喜欢这个自己改造的弹出层。自己在项目中也用的是这个。
</div>
</body>
</html>
相关推荐
《jQuery弹出层插件：实现简单遮罩弹出框效果》 在Web开发中，弹出层（Modal）是一种常见的交互元素，用于在用户与页面进行交互时提供额外的信息或者功能。jQuery作为一款强大的JavaScript库，提供了丰富的插件来...
"jquery弹出层带关闭按钮"这个主题涉及到的是使用jQuery来创建具有关闭功能的弹出窗口，这在网页交互设计中是非常常见的需求。下面将详细解释如何实现这一功能。 首先，我们需要理解什么是弹出层（Popup Layer）。...
本文将深入探讨标题所提及的"jQuery弹出层插件三种简单遮罩弹出框效果"，以及如何利用jQuery实现这些效果。 首先，让我们了解什么是弹出层和遮罩弹出框。弹出层（Popup Layer）是一种常见的网页交互设计，当用户...
标题“jquery弹出层”暗示我们将会探讨的是如何使用jQuery来实现网页上的弹出层效果，这在网页设计中是非常常见的一种功能，用于显示警告、信息、确认对话框或者复杂的模态窗口。 首先，让我们理解什么是弹出层。弹...
《jQuery弹出层技术详解与应用实践》 在网页开发中，用户交互体验的重要性日益凸显，其中弹出层（Popup Layer）作为一种常见的交互元素，被广泛应用于提示信息、表单填写、图片预览等场景。jQuery，作为JavaScript...
在现代网页设计中，交互性和用户体验是至关重要的因素，而jQuery弹出层弹出框效果则是提升这些体验的重要工具。jQuery，一个强大的JavaScript库，简化了DOM操作、事件处理、动画以及Ajax交互，使得创建复杂的网页...
例如，当用户点击某个按钮时，使用`.show()`方法显示弹出层和遮罩层；当用户关闭弹出层时，使用`.hide()`方法隐藏它们。 - **动画效果**：可以利用jQuery的动画功能（如`.fadeIn()`, `.fadeOut()`, `.animate()`）...
【jQuery悬停弹出遮罩显示按钮代码】是一种常见的网页交互设计，用于增强用户体验，尤其在导航、展示详细信息或触发特定操作时。这个技术基于JavaScript库jQuery，它简化了DOM操作、事件处理和动画效果，使得实现...
**jQuery弹出层插件SexyLightBox详解** 在网页设计中，弹出层是一种常见的交互元素，用于在用户点击某个链接或按钮时显示一个浮动窗口，通常用来展示图片、视频或者详细信息。SexyLightBox是一款基于jQuery的弹出层...
【jQuery悬停弹出遮罩显示按钮代码】是一种常见的网页交互设计，主要利用JavaScript库jQuery实现，用于增强用户体验。在网页中，用户将鼠标指针悬停在特定图像上时，会触发一个遮罩层的弹出效果，同时在遮罩层上显示...
在前端开发中，jQuery弹出层插件是用于创建弹窗效果的重要工具，它能够帮助开发者轻松实现模态对话框、提示信息、加载提示等交互功能。本篇将详细介绍jQuery弹出层插件，以及如何使用名为"Popup Div"的实例。 首先...
**jQuery图片点击弹出遮罩层标记注释特效详解** jQuery是一个广泛应用于Web开发的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。在这个项目中，我们讨论的是如何利用jQuery实现一种...
一、jQuery弹出层登录 弹出层登录是网页中常见的一种交互设计，它能在不离开当前页面的情况下，提供一个独立的输入框供用户进行登录操作。实现这个效果的关键在于创建一个隐藏的HTML元素（弹出层），然后通过jQuery...
在本示例中，“非常简单的jquery遮罩层鼠标点击按钮放大展开动画弹出框”是一个利用jQuery实现的功能，主要用于增强用户交互体验。下面将详细介绍这个功能的实现原理和相关知识点。 首先，jQuery遮罩层（Mask Layer...
在本项目中，“jQuery点击遮罩弹出层固定网页中间.rar”是一个用于创建网页弹出层的资源包，特别适合于手机端的交互设计。它包含以下四个主要部分：`index.html`（主页面文件）、`images`（图像文件夹）、`js`...
8. **关闭弹出层**：当用户完成交互或点击关闭按钮时，使用jQuery的`.hide()`方法隐藏弹出层和遮罩层。 综上所述，这个代码资源提供了一个实用的模板，帮助开发者快速实现自适应的遮罩弹出层。通过学习和理解这些...
再次点击或者点击遮罩层其他区域时，隐藏弹出层。可能还会包括一些事件处理，如检查分享服务是否可用，或者在分享后给出反馈。 此外，为了提高用户体验，可能还需要考虑以下几点： - 弹出层的延迟关闭：让用户有...
Lightbox是一种常见的弹出层效果，它在网页上创建一个半透明的遮罩层，然后在其中显示放大后的图片。用户可以在这个全屏的视图中查看图片，而不会被网页其他内容所干扰。 **三、jQuery Lightbox的工作原理** 1. **...
"jQuery弹出层"通常指的是使用jQuery实现的对话框或模态窗口，这些元素可以在用户操作后突然出现在网页上，显示额外的信息或提供交互功能。在网页设计中，弹出层常用于警告、确认、展示详细信息或提供表单等场景。 ...
// 如果弹出层有关闭按钮 $('#popup .closeBtn').click(function() { $('#popup').hide(); }); ``` 这里，`$(event.target).closest('#popup')`用于检查点击是否发生在弹出层内。如果不在，就隐藏弹出层。 提供的...