`

自己写的一个弹出层插件

IE 
阅读更多
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 弹出层插件,可拖动”表明这是一个基于jQuery的自定义弹出框插件,具备拖动功能。在Web开发中,弹出层(也称为对话框或模态窗口)常用于显示警告、确认信息或者提供用户交互界面。这个插件...

    20种弹出层,弹窗 jQuery+CSS3 多功能弹出层插件v2.0.1

    本文将深入探讨一款名为“20种弹出层”的jQuery+CSS3多功能弹出层插件v2.0.1,它以其丰富的样式和强大的功能,为开发者提供了极大的便利。 一、插件介绍 "20种弹出层"是一款基于jQuery和CSS3技术的弹出层插件,它...

    jquery弹出层插件

    《jQuery弹出层插件深度解析》 在Web开发领域,jQuery库因其简洁的API和强大的功能而广受开发者喜爱。对于用户交互和界面展示,弹出层(Modal)是不可或缺的一部分,它能够吸引用户的注意力并提供额外的信息或操作...

    jquery弹出层插件SexyLightBox

    **jQuery弹出层插件SexyLightBox详解** 在网页设计中,弹出层是一种常见的交互元素,用于在用户点击某个链接或按钮时显示一个浮动窗口,通常用来展示图片、视频或者详细信息。SexyLightBox是一款基于jQuery的弹出层...

    一款不错的Jquery弹出层插件

    标题中的“一款不错的Jquery弹出层插件”指的是一个基于JavaScript库JQuery设计的用于创建弹出对话框或模态窗口的插件。在网页交互设计中,弹出层通常用于显示通知、提示信息、表单或者进行确认操作,为用户提供一种...

    JQuery弹出层插件

    "Popup Div"是一个基于jQuery的弹出层插件,其版本为v1.0。这个插件允许开发者通过简单的API调用来快速构建弹出层。以下是一些主要特性: 1. **多样化样式**:Popup Div 提供了多种预设样式,可以适应不同的设计...

    jQuery弹出层插件大全

    6. **Shadowbox**: Shadowbox是一个跨浏览器的弹出层插件,可以展示图片、IFRAME、HTML和Flash内容。它的设计目标是提供一个统一的用户体验,无论内容类型如何。用户可以下载源码并在项目中集成。 除此之外,还有...

    zeroModal-扁平化风格jQuery弹出层插件

    《zeroModal:打造扁平化风格的jQuery弹出层插件》 在现代网页设计中,扁平化风格因其简洁、清晰的特点深受喜爱,而jQuery弹出层插件则是提升用户体验的重要工具。"zeroModal"就是这样一款专为实现扁平化效果而设计...

    jQuery弹出层插件PopupDiv-v1.0下载

    jQuery弹出层插件PopupDiv-v1.0是一款基于JavaScript库jQuery开发的用户界面组件,主要用于在网页上创建各种类型的弹出窗口。弹出层在Web应用中非常常见,用于显示通知、对话框、表单、图片轮播等多种功能。PopupDiv...

    jQuery zoom图片弹出层插件简单的图片相册弹出层窗口

    jQuery zoom图片弹出层插件简单的图片相册弹出层窗口展示代码 引入相关js和css文件 &lt;link rel="stylesheet" href="css/zoom.css" media="all" /&gt; [removed][removed] [removed][removed] html 格式 ...

    超级漂亮的Jquery弹出层插件

    超级漂亮的Jquery弹出层插件,可支持以下功能 1、触发响应事件 2、设置弹出层的标题 3、设置弹出层类型(text、容器ID、URL、Iframe) 4、弹出层的内容获取(text文本、容器ID名称、URL地址、Iframe的地址) 5、...

    jquery 弹出层插件下载(简单、易用)

    首先,让我们深入了解一下jQuery弹出层插件的基本概念。弹出层通常包括模态对话框和非模态对话框两种类型。模态对话框会阻止用户与页面其他部分的交互,直到弹出层被关闭;而非模态对话框则允许用户在不关闭弹出层的...

    jQuery弹出层插件三种简单遮罩弹出框效果.rar

    《jQuery弹出层插件:实现简单遮罩弹出框效果》 在Web开发中,弹出层(Modal)是一种常见的交互元素,用于在用户与页面进行交互时提供额外的信息或者功能。jQuery作为一款强大的JavaScript库,提供了丰富的插件来...

    信息提示弹出层插件.zip

    在这个名为"信息提示弹出层插件.zip"的压缩包中,我们可能找到了一个专门用于实现这一功能的JavaScript组件。 首先,我们需要了解"信息提示弹出层插件"的核心特点。描述中提到该插件具有多种提示功能,这意味着它...

    iframe弹出层插件代码

    本资源提供的是一款基于`iframe`的弹出层插件代码,适用于各种场景,如表单提交、内容预览、广告展示等。`iframe`全称为"inline frame",是HTML的一种元素,允许网页嵌入另一个网页,从而实现内容的动态加载和隔离。...

    jquery 弹出层插件

    本文将详细介绍一个名为“jQuery弹出层插件”的工具,该插件以其轻量级、易于使用和高度可定制化的特点,深受开发者喜爱。 首先,我们了解下什么是jQuery。jQuery是由John Resig于2006年创建的一个JavaScript库,它...

    自己写的自动弹出层

    标题中的“自己写的自动弹出层”指的是一个自定义的JavaScript弹窗插件或功能,由作者独立开发完成。在网页设计中,弹出层通常用于显示消息、提示、确认框或者进行表单输入等,它能以非侵入式的方式提供用户交互,...

    自己写的弹出层插件(基于jquery)

    这个特定的项目是一个基于jQuery的自定义弹出层插件,由作者独立编写。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画效果,使得开发弹出层插件变得更加容易。 首先,让我们深入了解一下...

Global site tag (gtag.js) - Google Analytics