1.插件js
var itemId="";
var showDivId="";
//控制层居中显示
function center(id){
var o = document.getElementById(id);
o.style.display = 'block';
var s = {
position:'absolute',
top:'50%',
left:'50%',
margin:o.offsetHeight/-2+(document.body.scrollTop||document.documentElement.scrollTop)+'px '
+(o.offsetWidth/-2+(document.body.scrollLeft||document.documentElement.scrollLeft))+'px'
}
for(var p in s){
o.style[p] =s[p]
}
}
//显示层
var iframe = document.createElement('iframe');
iframe.style.cssText = 'position:absolute;display:none;z-index:99;';
iframe.frameBorder = 0;
document.body.appendChild(iframe);
function showDIV(id){
center(id);
var o = document.getElementById(id);
iframe.width = o.offsetWidth;
iframe.height = o.offsetHeight;
o.style.visibility = 'visible';
o.style.zIndex = 100;
iframe.style.top = o.offsetTop+'px';
iframe.style.left = o.offsetLeft + 'px';
iframe.style.display = 'block'
showDivId=id;
var laydiv = document.getElementById('laydiv');
with(laydiv.style){
width = document.documentElement.scrollWidth + 'px';
height = document.documentElement.scrollHeight+'px';
display = 'block';
}
}
//隐藏层
function hiddenDIV(id,pageId){
var o = document.getElementById(id);
iframe.style.display = 'none'
o?o.style.visibility = 'hidden':'';
document.getElementById('laydiv').style.display = 'none';
document.getElementById(pageId).value="";
document.getElementById(pageId).innerHTML="";
}
2.在页面上设置一个<div>
3.页面上加一个样式
<div id="laydiv" style="position:absolute;display:none;filter:alpha(opacity=50);opacity:0.5;background:#999;top:0;left:0;">
<!--[if IE 6]> <iframe frameBorder = 0 width=100% height=100% style="filter:alpha(opacity=0);opacity:0"></iframe><![endif]-->
</div>
4.调用js里面的方法即可
分享到:
相关推荐
标题中的“自己写的jquery 弹出层插件,可拖动”表明这是一个基于jQuery的自定义弹出框插件,具备拖动功能。在Web开发中,弹出层(也称为对话框或模态窗口)常用于显示警告、确认信息或者提供用户交互界面。这个插件...
本文将深入探讨一款名为“20种弹出层”的jQuery+CSS3多功能弹出层插件v2.0.1,它以其丰富的样式和强大的功能,为开发者提供了极大的便利。 一、插件介绍 "20种弹出层"是一款基于jQuery和CSS3技术的弹出层插件,它...
《jQuery弹出层插件深度解析》 在Web开发领域,jQuery库因其简洁的API和强大的功能而广受开发者喜爱。对于用户交互和界面展示,弹出层(Modal)是不可或缺的一部分,它能够吸引用户的注意力并提供额外的信息或操作...
**jQuery弹出层插件SexyLightBox详解** 在网页设计中,弹出层是一种常见的交互元素,用于在用户点击某个链接或按钮时显示一个浮动窗口,通常用来展示图片、视频或者详细信息。SexyLightBox是一款基于jQuery的弹出层...
标题中的“一款不错的Jquery弹出层插件”指的是一个基于JavaScript库JQuery设计的用于创建弹出对话框或模态窗口的插件。在网页交互设计中,弹出层通常用于显示通知、提示信息、表单或者进行确认操作,为用户提供一种...
"Popup Div"是一个基于jQuery的弹出层插件,其版本为v1.0。这个插件允许开发者通过简单的API调用来快速构建弹出层。以下是一些主要特性: 1. **多样化样式**:Popup Div 提供了多种预设样式,可以适应不同的设计...
6. **Shadowbox**: Shadowbox是一个跨浏览器的弹出层插件,可以展示图片、IFRAME、HTML和Flash内容。它的设计目标是提供一个统一的用户体验,无论内容类型如何。用户可以下载源码并在项目中集成。 除此之外,还有...
《zeroModal:打造扁平化风格的jQuery弹出层插件》 在现代网页设计中,扁平化风格因其简洁、清晰的特点深受喜爱,而jQuery弹出层插件则是提升用户体验的重要工具。"zeroModal"就是这样一款专为实现扁平化效果而设计...
jQuery弹出层插件PopupDiv-v1.0是一款基于JavaScript库jQuery开发的用户界面组件,主要用于在网页上创建各种类型的弹出窗口。弹出层在Web应用中非常常见,用于显示通知、对话框、表单、图片轮播等多种功能。PopupDiv...
jQuery zoom图片弹出层插件简单的图片相册弹出层窗口展示代码 引入相关js和css文件 <link rel="stylesheet" href="css/zoom.css" media="all" /> [removed][removed] [removed][removed] html 格式 ...
超级漂亮的Jquery弹出层插件,可支持以下功能 1、触发响应事件 2、设置弹出层的标题 3、设置弹出层类型(text、容器ID、URL、Iframe) 4、弹出层的内容获取(text文本、容器ID名称、URL地址、Iframe的地址) 5、...
首先,让我们深入了解一下jQuery弹出层插件的基本概念。弹出层通常包括模态对话框和非模态对话框两种类型。模态对话框会阻止用户与页面其他部分的交互,直到弹出层被关闭;而非模态对话框则允许用户在不关闭弹出层的...
《jQuery弹出层插件:实现简单遮罩弹出框效果》 在Web开发中,弹出层(Modal)是一种常见的交互元素,用于在用户与页面进行交互时提供额外的信息或者功能。jQuery作为一款强大的JavaScript库,提供了丰富的插件来...
在这个名为"信息提示弹出层插件.zip"的压缩包中,我们可能找到了一个专门用于实现这一功能的JavaScript组件。 首先,我们需要了解"信息提示弹出层插件"的核心特点。描述中提到该插件具有多种提示功能,这意味着它...
本资源提供的是一款基于`iframe`的弹出层插件代码,适用于各种场景,如表单提交、内容预览、广告展示等。`iframe`全称为"inline frame",是HTML的一种元素,允许网页嵌入另一个网页,从而实现内容的动态加载和隔离。...
本文将详细介绍一个名为“jQuery弹出层插件”的工具,该插件以其轻量级、易于使用和高度可定制化的特点,深受开发者喜爱。 首先,我们了解下什么是jQuery。jQuery是由John Resig于2006年创建的一个JavaScript库,它...
标题中的“自己写的自动弹出层”指的是一个自定义的JavaScript弹窗插件或功能,由作者独立开发完成。在网页设计中,弹出层通常用于显示消息、提示、确认框或者进行表单输入等,它能以非侵入式的方式提供用户交互,...
这个特定的项目是一个基于jQuery的自定义弹出层插件,由作者独立编写。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画效果,使得开发弹出层插件变得更加容易。 首先,让我们深入了解一下...