`

js遮罩层

CSSIEjQueryFirefoxHTML 
阅读更多 
<!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=utf-8" />
<title>史上最精简，最强大的JS遮罩层效果，支持ie firefox jQuery遮罩层</title>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
//显示灰色JS遮罩层
function showBg(ct,content){
var bH=$("body").height();
var bW=$("body").width()+16;
var objWH=getObjWh(ct);
$("#fullbg").css({width:bW,height:bH,display:"block"});
var tbT=objWH.split("|")[0]+"px";
var tbL=objWH.split("|")[1]+"px";
$("#"+ct).css({top:tbT,left:tbL,display:"block"});
$("#"+content).html("<div style='text-align:center'>正在加载，请稍后...</div>");
$(window).scroll(function(){resetBg()});
$(window).resize(function(){resetBg()});
}
function getObjWh(obj){
var st=document.documentElement.scrollTop;//滚动条距顶部的距离
var sl=document.documentElement.scrollLeft;//滚动条距左边的距离
var ch=document.documentElement.clientHeight;//屏幕的高度
var cw=document.documentElement.clientWidth;//屏幕的宽度
var objH=$("#"+obj).height();//浮动对象的高度
var objW=$("#"+obj).width();//浮动对象的宽度
var objT=Number(st)+(Number(ch)-Number(objH))/2;
var objL=Number(sl)+(Number(cw)-Number(objW))/2;
return objT+"|"+objL;
}
function resetBg(){
var fullbg=$("#fullbg").css("display");
if(fullbg=="block"){
var bH2=$("body").height();
var bW2=$("body").width()+16;
$("#fullbg").css({width:bW2,height:bH2});
var objV=getObjWh("dialog");
var tbT=objV.split("|")[0]+"px";
var tbL=objV.split("|")[1]+"px";
$("#dialog").css({top:tbT,left:tbL});
}
}

//关闭灰色JS遮罩层和操作窗口
function closeBg(){
$("#fullbg").css("display","none");
$("#dialog").css("display","none");
}

</script>
<style type="text/css">
*{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#fullbg{
background-color: Gray;
display:none;
z-index:3;
position:absolute;
left:0px;
top:0px;
filter:Alpha(Opacity=30);
/* IE */
-moz-opacity:0.4; 
/* Moz + FF */
opacity: 0.4; 
}

#dialog {
position:absolute;
width:200px;
height:200px;
background:#F00;
display: none;
z-index: 5;
}

#main {
height: 1500px;
}
</style>
</head>
<body>
<div id="main">
<a href="#rhis" onclick="showBg('dialog','dialog_content');">点击这里看JS遮罩层效果</a>
</div>
<!-- JS遮罩层 -->
<div id="fullbg"></div>
<!-- end JS遮罩层 -->
<!-- 对话框 -->
<div id="dialog">
<div id="dialog_content"></div>
<div style="text-align: center;"><a href="#" onclick="closeBg();">关闭</a></div>
</div>
<!-- JS遮罩层上方的对话框 -->
</body>
</html>






<style type="text/css">
	.shade{width:600px;border:1px gray solid; height:450px; margin-left:50px;
		 padding-left:10px; padding-right:10px; position:absolute; display:none; background: #F9F9FB;z-index: 10}
	#full_div{position: absolute;background:#9DA7C3;left: 0;top: 0;display: none; z-index: 9}
</style>
<script type="text/javascript">
	  var d1_ ,d2_,d3_;
	  $(function(){
	  		d1_=$("#cbs");
	  		d2_=$("#classify");
	  		d3_=$("#full_div");
	  		var L =( Math.max(document.body.scrollWidth,document.body.clientWidth)/2-d1_.get(0).offsetWidth-320)+"px";
	  		var H =( Math.max(document.body.scrollHeight,document.body.clientHeight)/2-d1_.get(0).offsetHeight-200)+"px";
	  		load_full_div();
	  		d1_.css("left",L).css("top",H);
	  		d2_.css("left",L).css("top",H);
	  });
	  function load_full_div(){
	  	var div = d3_.get(0);
	  	with(div.style){
	  		width=Math.max(document.body.scrollWidth,document.body.clientWidth)+"px";
	  		height=Math.max(document.body.scrollHeight,document.body.clientHeight)+"px";
	  		filter = "alpha(opacity=50)"; //ie 
		    opacity = 0.5; //firfox
	  	}
	  }
 <div id="cbs" class="shade">
			<iframe src="commodity.do?operate=doShowPagedCompany" scrolling="no" frameborder="0" height="100%" width="100%"></iframe>
		</div>
		<div id="classify" class="shade">
			<iframe src="commodity.do?operate=doShowPagedSort" scrolling="no" frameborder="0" height="100%" width="100%"></iframe>
		</div>
    <div id="full_div"><div>
分享到：
| js简繁体
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js遮罩层插件

    JavaScript 遮罩层插件是一种常见的前端开发工具，它用于在页面上创建一个半透明的覆盖层，通常用于在用户等待加载数据或执行异步操作时提供视觉反馈。在这个场景中，我们讨论的插件可能名为“LoadMask”或者“lwb_...

    javascript 遮罩层简单特效

    js 遮罩层js 遮罩层js 遮罩层js 遮罩层js 遮罩层js 遮罩层js 遮罩层

    js 遮罩层弹出对话框 很简单得

    js 遮罩层弹出对话框 很简单得 js 遮罩层弹出对话框 很简单得 js 遮罩层弹出对话框 很简单得

    JS遮罩层效果

    本文将详细介绍如何使用JS实现这种遮罩层效果，并探讨其在IE、Firefox以及jQuery环境下的应用。 首先，让我们理解遮罩层的基本原理。遮罩层通常由两个主要部分组成：遮罩元素和目标元素。遮罩元素是覆盖在页面上的...

    JS遮罩层 提示层

    "JS遮罩层 提示层"这个标题所提及的是利用JavaScript技术实现的一种网页交互功能，即在用户界面上创建一个遮罩层或者提示层，通常用于显示重要的消息、警告、选项选择或进行某种操作前的确认。 遮罩层是一种半透明...

    js 遮罩层源码

    封装遮罩层div显示效果，将其放在页面的div中加载

    javascript遮罩层的弹出框

    JavaScript遮罩层弹出框是网页交互中常见的一种设计元素，它用于在用户与页面其他内容互动时提供临时的信息展示或者交互操作。这种技术通常结合CSS样式和JavaScript脚本来实现，使得弹出框能够优雅地从页面背景中...

    JS弹DIVJS弹DIV，遮罩层JS弹DIV，遮罩层

    JS弹DIV，遮罩层JS弹DIV，遮罩层JS弹DIV，遮罩层

    遮罩层js代码

    本主题聚焦于"遮罩层js"，这是一个基于jQuery和sliphover库实现的JavaScript代码，它允许开发者创建具有多样性和自定义功能的遮罩层。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画...

    多种JS遮罩层特效欢迎下载

    本资源包含四种JS遮罩层库：GreyBox v5.53、Lightbox Gone Wild、litebox-2.4，这些工具可以帮助开发者轻松实现各种动态遮罩层效果。 1. GreyBox v5.53： GreyBox是一款强大的JavaScript插件，它允许你在当前页面...

    js打开关闭遮罩层

    在本主题中，我们将深入探讨如何使用JavaScript来实现遮罩层的打开和关闭，并结合loading图片以增强用户体验。 一、JavaScript基础 JavaScript是一种广泛使用的客户端脚本语言，它可以直接在用户的浏览器中运行，...

    超级爽的 js 遮罩层 谦容 FF IE 支持拖动...

    标题中的"超级爽的 js 遮罩层 谦容 FF IE 支持拖动"意味着我们找到了一个高效且具有良好用户体验的解决方案，它不仅能在多种浏览器上运行，还支持用户对遮罩层进行拖动操作。下面将详细介绍这个知识点。 首先，遮罩...

    JS变灰页面显示遮罩层登录窗口，使页面无法操作

    这种效果通常通过JavaScript（JS）配合CSS来实现，其中涉及到的技术包括页面元素禁用、遮罩层创建以及Ajax无刷新加载。下面我们将详细讨论这些知识点。 1. **JS变灰页面**： 在JavaScript中，我们可以使用DOM操作...

    遮罩层 javascript js 数据提交

    "遮罩层 javascript js 数据提交"这个主题涉及到的是如何在JavaScript中实现一个遮罩层，并在用户点击提交按钮时，利用JavaScript处理数据提交的过程。在此过程中，遮罩层的出现和消失以及提交操作的执行，都是通过...

    js 弹出遮罩层

    在JavaScript编程中，"弹出遮罩层"是一种常见的用户界面设计手法，它通常用于创建一个半透明的覆盖层，以突出显示特定区域或者暂停其他交互，为用户提供一种聚焦的体验。例如，当我们需要显示模态对话框、加载提示...

    js 页面全部遮罩层

    "js 页面全部遮罩层"这个话题涉及到使用JavaScript（通常借助jQuery库）来实现全屏遮罩效果，包括阻止鼠标滚动和键盘上下键的操作。以下是对这个主题的详细讲解： 首先，我们需要理解遮罩层的基本概念。遮罩层通常...

    JS移动端点击弹出遮罩层

    接下来，我们编写JavaScript代码（假设文件名为`main.js`）来处理按钮点击事件和遮罩层的显示与隐藏： ```javascript document.getElementById('toggleMask').addEventListener('click', function() { var mask = ...

    Javascript实现的遮罩层

    通过以上步骤，我们就实现了一个基本的JavaScript遮罩层。当然，这个遮罩层还可以进一步优化，比如添加过渡动画、响应式设计、兼容性处理等。在实际开发中，可以结合现有的库和框架，如jQuery或Vue.js，来更高效地...

    遮罩层 Js 只需调用 一个方法

    在JavaScript中实现遮罩层，通常涉及到DOM操作、CSS样式设置和事件监听。关键在于创建一个DOM元素（通常是div），为其设置合适的CSS样式，如背景颜色、透明度、位置等，使其覆盖整个页面或指定区域。 标题“遮罩层 ...

    js弹出遮罩层

    综上所述，"js弹出遮罩层"是一个结合了HTML、CSS和JavaScript技术的功能，它提供了良好的用户体验，让用户能够专注于当前的操作，而不会被其他页面元素所干扰。在实际开发中，还可以根据需求进一步优化，比如添加...

Magicbox
Global site tag (gtag.js) - Google Analytics