<!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>
<title>网页中弹出小窗口,页面背景逐渐变为半透明</title>
<style>
html,body{font-size:12px;margin:0px;height:100%;}
.mesWindow{border:#666 1px solid;background:#fff;}
.mesWindowTop{border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px;}
.mesWindowContent{margin:4px;font-size:12px;}
.mesWindow .close{height:15px;width:28px;border:none;cursor:pointer;text-decoration:underline;background:#fff}
</style>
<script>
var isIe=(document.all)?true:false;
//设置select的可见状态
function setSelectState(state)
{
var objl=document.getElementsByTagName('select');
for(var i=0;i<objl.length;i++)
{
objl[i].style.visibility=state;
}
}
function mousePosition(ev)
{
if(ev.pageX || ev.pageY)
{
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
//弹出方法
function showMessageBox(wTitle,content,pos,wWidth)
{
closeWindow();
var bWidth=parseInt(document.documentElement.scrollWidth);
var bHeight=parseInt(document.documentElement.scrollHeight);
if(isIe){
setSelectState('hidden');}
var back=document.createElement("div");
back.id="back";
var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;";
styleStr+=(isIe)?"filter:alpha(opacity=0);":"opacity:0;";
back.style.cssText=styleStr;
document.body.appendChild(back);
showBackground(back,50);
var mesW=document.createElement("div");
mesW.id="mesWindow";
mesW.className="mesWindow";
mesW.innerHTML="<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+wTitle+"</td><td style='width:1px;'><input type='button' onclick='closeWindow();' title='关闭窗口' class='close' value='关闭' /></td></tr></table></div><div class='mesWindowContent' id='mesWindowContent'>"+content+"</div><div class='mesWindowBottom'></div>";
styleStr="left:"+(((pos.x-wWidth)>0)?(pos.x-wWidth):pos.x)+"px;top:"+(pos.y)+"px;position:absolute;width:"+wWidth+"px;";
mesW.style.cssText=styleStr;
document.body.appendChild(mesW);
}
//让背景渐渐变暗
function showBackground(obj,endInt)
{
if(isIe)
{
obj.filters.alpha.opacity+=1;
if(obj.filters.alpha.opacity<endInt)
{
setTimeout(function(){showBackground(obj,endInt)},5);
}
}else{
var al=parseFloat(obj.style.opacity);al+=0.01;
obj.style.opacity=al;
if(al<(endInt/100))
{setTimeout(function(){showBackground(obj,endInt)},5);}
}
}
//关闭窗口
function closeWindow()
{
if(document.getElementById('back')!=null)
{
document.getElementById('back').parentNode.removeChild(document.getElementById('back'));
}
if(document.getElementById('mesWindow')!=null)
{
document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));
}
if(isIe){
setSelectState('');}
}
//测试弹出
function testMessageBox(ev)
{
var objPos = mousePosition(ev);
messContent="<div style='padding:20px 0 20px 0;text-align:center'>消息正文</div>";
showMessageBox('窗口标题',messContent,objPos,350);
}
</script>
</head>
<body>
<div style="padding:20px">
<div style="text-align:left";><a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div>
<div style="text-align:left;padding-left:20px;padding-top:10px";><select ID="Select1" NAME="Select1"><option>下拉</option></select>弹出窗口时会将其隐藏，关闭时会让其显示，目的是在IE中防止弹出的DIV挡不住下拉框</div>
<div style="text-align:center";><a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div>
<div style="text-align:right";><a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div>
</div>
</body>
</html>
分享到：
相关推荐
这里帖出两种效果，第一种是弹出时页面背景直接变为半透明，而第二种则对XP关机效果仿得更像一点儿，即背景是有一个逐渐变为半透明的过程，大家可以留心观察两种效果的区别,两种效果全部通过了IE6和firefox的测试。
综上所述，"网页中弹出小窗口,页面背景逐渐变为半透明"这一效果的实现涉及HTML结构、CSS样式和JavaScript编程，以及用户体验和性能优化等多个方面。通过熟练掌握这些技术，可以创建更具吸引力和互动性的网页。
介绍： 不管是做网站还是一些应用系统，都免不了要用到一些弹出的效果，在ZJ-BLOG V1.0 Beta2版本我在一些功能使用了网络上比较流行的仿XP关机效果的弹出功能，按目前的反应来说还是效果不错的，下面将此功能整一下...
在ASP.NET开发中，"实现了弹出窗口后背景变灰并屏蔽"这一功能通常涉及到对话框（Modal Dialog）的使用，以及页面动态效果的实现。这个功能的主要目的是在弹出一个窗口时，使得主页面变得不可操作，以引导用户专注于...
标题 "点击弹出窗口网页背景变暗且不可点的效果(三)：iframe实现" 涉及的是在网页设计中创建一种用户体验优化的技巧。这种技巧通常用于弹窗或者模态对话框，当用户点击弹出窗口时，背景页面会变暗并且变为不可交互...
【网页特效代码-页面特效】网页中弹出小窗口,页面背景逐渐变为半透明
总结起来，实现PopupWindow弹出后屏幕背景变成半透明效果，主要涉及到以下几个步骤： 1. 创建一个方法`backgroundAlpha()`用于设置屏幕背景的透明度。 2. 在PopupWindow显示之前调用`backgroundAlpha()`，传入适当的...
JavaScript 实现弹出 DIV 层同时页面背景渐变成半透亮效果是一种常见的网页交互设计，它通常用于创建对话框、提示信息或者用户确认操作等场景。这种效果通过 JavaScript 控制 DOM 元素的动态变化来达成，使得用户...
在网页设计中，实现点击后弹出窗口并使背景变黑的效果，是一种增强用户体验的技巧，因为它能聚焦用户的注意力在弹出的内容上，避免背景元素的干扰。本文将详细解释如何实现这样的功能，并探讨其在网页开发中的应用。...
在IT行业中，弹出层（通常称为Modal Window）是一种常见的用户界面设计，它可以在主页面之上显示一个半透明或全屏的窗口，用于提示信息、输入数据或进行其他交互操作，而不会打断用户的浏览流程。"弹出层锁窗口 背景...
3. **背景变灰色**：为了使背景变为淡灰色，可以在CSS中添加一个全屏覆盖的半透明灰色层。这通常是一个固定定位的元素，其`z-index`低于弹出窗口，以确保窗口在前面。例如： ```css body .modal-overlay { ...
在网页设计中，"div模拟弹出窗口"是一种常见的交互技术，它允许用户在不离开当前页面的情况下查看或操作相关信息。这种技术在Web2.0时代得到了广泛应用，因为它提供了更丰富的用户体验，使得网站更具动态性和互动性...
在本例中，我们将讨论一个仿网易登录弹出层的设计实现，它具备一系列高级特性，包括可拖动、窗口居中、自定义大小、背景变暗以及半透明边框。 首先，让我们深入理解这些特性： 1. **可拖动功能**：这个特性允许...
【描述】中提到的“DIV网页中弹出小窗口,页面背景逐渐变为半透明”是一种常见的网页交互效果。这通常通过JavaScript或者CSS3动画实现。在用户触发某个事件（如点击按钮）时，一个小窗口（可能是一个新的div或者模态...
3. 弹出层显示时，通过JavaScript创建一个新的Div元素，设置其背景为半透明黑色，并将其放置在页面的最顶层，使得背景变为灰色且不可点击。 4. 当弹出层关闭时，移除这个灰色覆盖层，恢复背景的正常状态。 在这个...
标题中的“背景不可操作的弹出窗”通常指的是在网页中使用JavaScript实现的一种用户体验设计，它允许一个弹出窗口（比如对话框、模态框）出现在页面上方，阻止用户与背景内容进行交互，直到弹出窗口被关闭。...
在网页设计中，有时我们需要实现一种效果：当用户需要进行登录或者其他重要操作时，页面会变成灰色，同时弹出一个登录窗口，以防止用户在未完成该操作前误触其他功能。这种效果通常通过JavaScript（JS）配合CSS来...
在Windows Presentation ...总的来说，实现WPF中的弹出透明渐变窗体涉及到多个方面，包括窗体属性的设置、渐变背景的创建、动画的应用以及窗口定位等。通过这种方式，可以创建出美观且具有独特视觉效果的用户界面。
在网页设计中，"页面弹出div"是一种常见的交互效果，它允许开发者在用户与页面交互时显示额外的信息或功能，而无需跳转至新页面。这种效果通常用于创建模态对话框、提示框或者加载内容区域。实现这一效果涉及前端...
在网页设计中，弹出层（也称为模态窗口或对话框）是一种常见的交互元素，用于显示临时信息或用户需要关注的内容，同时阻止用户与页面其他部分的交互。本文将探讨如何利用JavaScript（js）和CSS（层叠样式表）来实现...