做的小demo记录一下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<style>
.showdiv{
position:absolute;
background: #897;
width: 250px;
height: 150px;
z-index:999;
}
</style>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//监听浏览器窗口的变化
$(window).resize(function(){
//alert("Stop it!");
var term=$("#coverdiv").attr("style");
if(term!=null && term!=undefined){
var iWidth = $(window).width()//浏览器当前窗口可视区域宽度
var iHeight = $(window).height()//浏览器当前窗口可视区域高度
var divStyle="position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max($(document).height(), iHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:998;"
$("#coverdiv").attr("style",divStyle);
showPosition('showdiv');
}
});
});
//增加遮罩层
function addCoverDiv(showdivId){
var cdiv="<div id='coverdiv'></div>";
$('body').append(cdiv);
var iWidth = $(window).width()//浏览器当前窗口可视区域宽度
var iHeight = $(window).height()//浏览器当前窗口可视区域高度
var divStyle="position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max($(document).height(), iHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:998;"
$("#coverdiv").attr("style",divStyle);
//setTimeout(removeDiv,2000);
showPosition('showdiv')
$('#'+showdivId+'').show();
}
//移除遮罩层
function removeDiv(showdivId){
$("#coverdiv").remove();
$('#'+showdivId+'').hide();
}
//控制弹出层的位置
function showPosition(showid){
var showObj=$('#'+showid+'')
var iWidth = $(window).width()//浏览器当前窗口可视区域宽度
var iHeight = $(window).height()//浏览器当前窗口可视区域高度
var w=showObj.width();
var h=showObj.height()
var sleft=(iWidth-w)/2;
var stop=(iHeight-h)/2;
var showStyle="top:"+stop+"px;left:"+sleft+"px;";
showObj.attr("style",showStyle);
}
function test(){
alert("页面的文档高度 :"+$(document).height());
alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(window).height()); //浏览器当前窗口可视区域高度
}
</script>
<body>
<input type="button" value="变灰页面背景" onclick="addCoverDiv('showdiv')">
<input type="button" value="控制弹层位置" onclick="showPosition('showdiv')">
<div id="showdiv" class="showdiv" >
此处需要显示的divssss
<div><a href="javascript:removeDiv('showdiv')">close</a></div>
</div>
</body>
</html>
相关推荐
总的来说，理解和熟练使用这些弹出层类将有助于提升你在网页开发中的专业技能，使你的页面变得更加动态和用户友好。在实际项目中，你还可以根据具体需求扩展这些类，添加更多的功能和自定义选项，以满足各种复杂的...
'top': (windowHeight - popupHeight) / 2 + scrollTop, // 计算并设置弹出层的垂直居中位置 'left': ($(window).width() - popup.width()) / 2 // 计算并设置弹出层的水平居中位置 }); } centerPopup(); // ...
这种特效的实现主要依赖于JavaScript库jQuery，它简化了DOM操作、事件处理和动画效果，使得创建动态弹出层变得简单高效。 jQuery弹出层通常用于实现以下几种功能： 1. **信息提示**：显示警告、确认或成功消息。 2....
综上所述，这个"js+css点击弹出遮罩层图片放大展示demo"通过结合JavaScript和CSS的力量，实现了优雅的图片放大查看功能，为用户带来了更直观、更具沉浸感的浏览体验。在实际项目中，可以根据需求进行调整和优化，以...
在JavaScript的世界里，"弹出层与框"是前端开发中常见的交互元素，它们用于向用户展示信息、提示、警告或者获取用户输入。本资源提供了一种精美的JS实现方式，能够为你的网页添加吸引人的视觉效果。让我们深入探讨...
2. **模态窗口**：这种效果使弹出层在页面上居中显示，并阻止用户与背景内容交互。可以使用`.modal()`函数实现，同时设置透明度或其他样式使背景半透明，增强用户体验。 3. **淡入淡出效果**：jQuery的动画功能可以...
在本文中，我们将深入探讨如何使用纯CSS实现鼠标滑过时弹出层的效果。这个技术可以用于创建动态的、交互式的网页元素，如菜单、提示信息或图像预览，而无需依赖JavaScript。以下是一个详细的步骤解析： 首先，为了...
遮罩层在很多网页设计中都扮演着重要角色，尤其是在上传功能的页面中，可以有效地引导用户关注到页面中心内容，而背景半透明的效果能够使用户聚焦于弹出的菜单或表单中，同时降低背景内容的干扰。遮罩层在很多网站上...
为了使弹出窗口在页面中心居中，我们使用了`transform: translate(-50%, -50%)`，这会将弹窗左上角移动到其父元素的中心。 至于`images`目录，通常我们会在这里存放与页面相关的图片资源，如弹出窗口的图标或背景...
页面提示通常会以弹出框、气泡提示、工具提示等形式出现，这些都会在HTML代码中被定义和嵌入。 3. **script.js**: 这是一个JavaScript文件，它处理页面的动态行为和交互逻辑。在页面提示的场景下，`script.js`会...