<!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" xml:lang="zh-CN" lang="zh-CN">
<head>
<title>CSS+JS 蒙板居中技术</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<style>
// 问题一:使用CSS+JSS实现蒙板技术
#mb {
position:absolute;
background:#000;filter:alpha(opacity=30);
z-index:99;
margin:0 auto;
padding:0;
left:0;
top:0;
width:100%;
height:100%;
}
#wd {
position:absolute;
margin:0 auto;
padding:0;
top:25%;
z-index:100;
background:#fff;
}
</style>
</head>
<body>
<div id = "mb" name = "mb" style="display:none;"></div>
<div id ="wd" name = "wd" style="display:none;"><img src ="1.jpg"></img></div>
<input type="button" onclick="controlDiv('wd',1)" value="弹出遮罩层" />
<iframe id="" src="http://www.baidu.com" width="100%" height="300"></iframe>
<script type="text/javascript">
function controlDiv(DivID,divCase){
var mengban = document.getElementById("mb");
var divs=document.getElementById(DivID);
//问题二:用JS获取设置弹出div始终居中显示
//这个399是居中图片或者div的宽度
var v_left=(document.body.clientWidth-399)/2 + document.body.scrollLeft;
var v_top=(document.body.clientHeight-divs.clientHeight)/2 + document.body.scrollTop;
if(divCase==1){
divs.style.left=v_left+'px';
divs.style.top=v_top+'px';
divs.style.display="block";
mengban.style.display="block";
// 问题三:用JS获取DIV的宽度和高度
//js获取div的宽度或者高度 一下三种方式都是可以的
//alert("divs.clientWidth--->"+divs.clientWidth);
//alert("divs.clientHeight--->"+divs.clientHeight);
//alert("divs.scrollWidth--->"+divs.scrollWidth);
//alert("divs.scrollHeight--->"+divs.scrollHeight);
//alert("divs.offsetWidth--->"+divs.offsetWidth);
//alert("divs.offsetHeight--->"+divs.offsetHeight);
}else if(divCase==2){
divs.style.display="none";
mengban.style.display="none";
}
else
divs.innerHTML=divCase; //输出HTML文本到DIV
}
</script>
</body>
</html>
分享到：
相关推荐
在网页设计中，CSS（Cascading Style Sheets）和JavaScript（JS）经常被用来实现各种交互效果，其中就包括创建DIV蒙板效果。一个DIV蒙板通常是指在页面上覆盖一层半透明或全黑的层，用于遮挡背景内容，突出显示特定...
在本文中，我们将深入探讨如何使用CSS和JavaScript（JS）创建一个可移动的蒙板进度条。这个功能常用于网页中的加载指示或者用户交互过程，为用户提供反馈，增强用户体验。 首先，我们来看“蒙板”（mask）的概念。...
div+js实现的弹出对话框，调用简单，可拖动，父页面禁止并半透明。弹出框可内嵌功能页面，也可去掉“iframe”然后做成单纯的对话框。 在windowsXP sp2下的 IE8、firefox3.5、opera10、傲游、TT浏览器、搜狗浏览器、...
JavaScript（简称JS）是一种广泛用于前端开发的编程语言，它能赋予网页动态功能，使得用户与页面交互变得更加直观和有趣。在本主题中，我们将深入探讨如何使用纯JavaScript实现div元素的拖动功能。 首先，我们需要...
JavaScript（简称JS）是一种广泛用于Web开发的轻量级脚本语言，它可以在客户端运行，为网页添加交互性。在本场景中，我们讨论的是如何使用JavaScript动态地在图片上生成矩形热区，并在热区上添加蒙版效果。热区...
在这个例子中，我们将深入探讨如何使用JavaScript和CSS在页面上弹出一个简单的蒙板。 首先，蒙板主要由两个`div`元素组成：`popWindow`和`maskLayer`。`popWindow`用于覆盖整个页面，呈现半透明效果，起到遮挡页面...
2. **CSS样式**：为对话框和蒙版添加合适的CSS样式，如居中对齐、阴影效果、透明度等。 ```css #dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 其他样式 */ } ....
1. 创建蒙板容器：使用javascript创建一个div容器，作为蒙板的容器，并设置其样式和布局。 2. 创建 iframe 容器：使用javascript创建一个iframe容器，作为蒙板内的嵌入式容器，用于嵌入其他页面内容。 3. 设置蒙板...
弹出层可以通过JavaScript控制显示和隐藏，与蒙板结合使用，可以创建更好的用户体验。以下是一个简单的HTML弹出层结构： ```html <div id="popup"> <div class="content"> <!-- 在这里放置弹出层的具体内容 --> ...
为了将表单内容传递给请求页面，我们可以使用JavaScript获取表单数据，并通过AJAX发送POST请求。假设我们有一个表单字段`inputName`，可以这样操作： ```javascript document.getElementById('submitForm')....
在网页设计中，为了增强用户体验和视觉效果，经常需要对图片进行各种处理，例如添加蒙板效果。"jQuery制作图片蒙板效果"就是一个常见的需求，它可以让图片在默认状态下显示一层半透明覆盖，当鼠标悬停时，蒙板消失，...
JavaScript中的蒙板（Modal）功能通常用于在网页上创建一种半透明覆盖层，用于显示临时信息、对话框或用户交互。在本文中，我们将深入探讨如何通过简单的JavaScript代码实现这一功能。 首先，创建一个蒙板的基本...
然后，在CSS中，我们为这个类设置适当的样式，如背景颜色、透明度、宽度、高度和位置，使其覆盖整个屏幕或特定区域。 ```css .mask { position: fixed; /* 或 absolute，取决于蒙层是否需要随页面滚动 */ top: 0;...
由于提供的文件内容不完整，并且存在OCR扫描错误，我将根据PS蒙板素材使用方法的相关知识，尽量不使用具体的操作指令来讲解这一主题。 蒙板（Mask）在Photoshop（PS）中是一种非常强大的工具，它允许用户对图像的...
在Windows Forms（Winform）开发中，创建透明窗体或蒙板效果是一种常见的技术，用于提升应用程序的视觉吸引力和用户体验。下面将详细讲解如何利用C#编程语言在Winform中实现这一功能。 首先，让我们理解透明窗体的...
剪贴蒙板是Photoshop软件中的一个重要功能，它在图像编辑和设计中起着至关重要的作用。本教程通过Flash动画的形式，将这一复杂的概念以直观、简单的方式呈现出来，非常适合初学者理解和掌握。 剪贴蒙板不同于普通的...
"Photoshop蒙板使用方法与技巧" Photoshop蒙板是 Photoshop 中一个非常强大且灵活的功能，它可以帮助用户在图像编辑过程中避免很多的麻烦和错误。下面是 Photoshop蒙板使用方法与技巧的详细介绍： 一、蒙板的建立...
### JavaScript 创建页面蒙板的相关知识点与技巧 随着Ajax技术的发展，网页中的动态效果变得越来越丰富。其中，页面蒙板作为一种常见的交互方式，在多种场景中得到了广泛的应用，例如模拟弹窗、提示框等。本文将...