<!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浮层菜单的实现涉及到HTML结构设计、CSS样式设定以及jQuery事件处理。通过合理的代码组织和性能优化，我们可以创建一个既美观又功能强大的浮层菜单系统，同时确保在主流浏览器中的良好兼容性。理解这些基础...
通常，jQuery浮层插件会提供一些预定义的样式和行为，开发者可以根据需求进行定制。 1. **浮层的基本原理**： 浮层通常是通过CSS实现定位的，可以设置`position`属性为`absolute`或`fixed`，然后利用`top`、`right...
这里提到的"jquery 图片置灰，添加浮层"是一个利用JavaScript库jQuery实现的功能，它允许我们在用户与图片交互时动态地改变图片的显示状态。接下来，我们将深入探讨这个功能的技术实现和相关知识点。 首先，jQuery...
jQuery的Dialog插件是实现这一功能的有效工具。它基于jQuery UI库，提供了丰富的配置选项和主题，可以轻松创建出美观、易用的对话框。以下是一些关于如何使用jQuery Dialog的关键知识点： 1. **引入依赖**：首先，...
本文将详细探讨如何使用 jQuery 实现一个简单的提示浮层，该浮层会跟随鼠标移动。 首先，我们需要了解基本的 HTML 结构。在提供的描述中，我们看到有多个带有鼠标悬停效果的元素，如“把鼠标放到这里1”到“把鼠标...
在这个名为"jQuery从页面右上角弹出的浮层代码.zip"的压缩包中，包含了一个实现这种功能的示例。该示例使用了jQuery库，结合CSS和HTML5技术来创建一个从页面右上角弹出的浮层效果。接下来，我们将详细探讨这些知识点...
在IT行业中，创建一个“点击图片弹出浮层”的功能是一项常见的交互设计，它能提供良好的用户体验，特别是在展示图片集如QQ空间相册时。这个功能的核心在于利用前端技术实现图片预览，允许用户在点击单张图片后，不...
本篇文章将深入探讨如何利用jQuery和CSS技术实现图片浮动层效果，包括原理、实现步骤及示例代码。 首先，我们需要了解浮动层的基本概念。浮动层，也称为漂浮窗口或弹出层，是在网页上创建的一种可移动、可隐藏的...
实现弹出层不再难，只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如：我想要这里是弹出浮动遮罩层</div> 并随页面滚动而滚动 只要调用 $('#ok').showModel();这个方法就可以了 调用$('#ok')...
5. **关闭按钮**：在浮层内部添加一个关闭按钮，一般用一个简单的图标表示，如"×"。按钮的点击事件同样由jQuery处理，当用户点击时，会隐藏整个浮层，恢复到原始页面状态。 实现步骤如下： 1. 引入 jQuery 和 CSS...
【描述】"64、Jquery页面右侧底部悬浮层样式代码"的描述简洁，暗示了这是一个具体的实现案例，可能包含了实现这一功能的完整代码示例。在实际应用中，这可能包括HTML结构、CSS样式和jQuery脚本的组合，提供了一个可...
样图： ... 注：浮层选择器源码来源于网络（Apache授权）,“jquery.dropdownTomcdropdown.3.js”为原创编写。
实现浮层的拖动功能，通常需要结合JavaScript或jQuery等库。基本思路是监听鼠标事件（mousedown、mousemove、mouseup），根据鼠标位置和元素初始位置计算新的坐标，然后更新元素的位置。 四、放大缩小 浮层的放大...
5. 工具应用：在实际开发中，开发者可能会使用诸如jQuery这样的库来简化JavaScript操作，或者使用Bootstrap等前端框架，它们内置了提示组件，可以快速实现类似的功能。 总之，“提示浮层跟随鼠标移动”是一种常见的...
jQuery库提供了丰富的API和事件处理机制，使得实现这种功能变得简单。本实例将详细讲解如何使用jQuery实现鼠标拖动浮层的功能，特别是拖动`div`等任何标签。 首先，我们需要引入jQuery库。在这个例子中，我们使用了...
本示例是利用JavaScript库jQuery来实现这一功能的。 jQuery是一款轻量级的JavaScript库，它简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。通过使用jQuery，开发者可以以更简洁、更高效的方式编写...
这个项目名为“jQuery鼠标经过方形图片切换成圆边特效，点击图片会弹出浮层，适合团队页面的展示，兼容主流浏览器”，它提供了一种创新的方式来增强网站的互动性和吸引力。接下来，我们将详细探讨这个项目的实现原理...