`
HUYIZIZHEN
  • 浏览: 115970 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

js弹出小窗口 背景渐变暗

htmlwebjavascript 
阅读更多 
<!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><a href="/Web/Wysj/Html_JS/" class="innerlink">网页</a>中弹出小窗口,页面背景逐渐变为半透明-ityoudao.com</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:35px;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:#111;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:10%;'><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'>消息正文-IT有道网不以数量以质量，尽量发布高质量的软文</div>";
showMessageBox('友情提示',messContent,objPos,350);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /></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><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>

注：代码转自http://www.ityoudao.com/Web/Cktx_631_796.html
分享到：
| CSS按钮制作
评论
发表评论

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

相关推荐

    弹出居中DIV窗口，背景逐渐变暗

    然后，我们可以通过JavaScript来控制弹出窗口的显示和隐藏，以及背景层的透明度变化。这里我们可以使用jQuery库，因为它提供了丰富的DOM操作和动画功能： ```javascript $(document).ready(function() { // 打开弹...

    网页中弹出小窗口,页面背景逐渐变为半透明

    - **弹出窗口样式**：弹出窗口的样式可以通过CSS进行定制，包括位置（`position`，如`absolute`或`fixed`）、大小、边框、背景颜色等。 3. **JavaScript控制**： - **显示与隐藏**：JavaScript可以通过改变HTML...

    背景变暗弹出层 遮蔽层效果

    首先，标题中的“背景变暗弹出层”是指在用户触发某个事件（如点击按钮）时，页面的背景会逐渐变暗，同时一个弹出窗口或对话框出现在用户视线中心。这种设计能够有效地将用户的注意力引导到弹出层上，避免背景内容的...

    js特效，各种页面弹出浮动

    点击弹出窗口层，并且背景变暗渐变.htm 设定时间弹出窗口.htm 打开一个窗口在一定的时间内自动关闭.htm 只在关闭窗口的时候提示，刷新的时候不提示.htm 离开时转跳到指定网址.htm 随同主窗口同时弹出的附加小窗口....

    JS实现点击登录弹出窗口同时背景色渐变动画效果

    本实例将探讨如何使用JavaScript来创建一个登录弹出窗口，并同时实现背景色的渐变动画效果。这个功能通常用于网页登录界面，当用户点击“登录”按钮时，弹出一个窗口，背景颜色逐渐变暗，形成一种聚焦的效果，引导...

    弹出层锁窗口 背景变灰 支持Firefox ie6 ie7 opera safari --IGad

    HTML负责结构，CSS用来控制样式，包括弹出层的位置、大小以及背景颜色的灰度渐变，JavaScript则用于处理交互，如弹出、关闭以及对背景的锁定。 在CSS方面，可以创建一个覆盖整个屏幕的div元素，设置其背景颜色为半...

    js弹出层多样式。

    本文将深入探讨使用JavaScript（JS）和CSS来创建多样化弹出层的方法，以及如何通过CSS实现丰富的样式效果。 首先，让我们了解弹出层的基本原理。在HTML中，我们通常会创建一个隐藏的`div`元素，作为弹出层的基础...

    Jquery弹出div层窗口以及div屏幕居中,背景滤镜效果,div拖拽效果

    "&gt;这是一个弹出窗口 $(document).ready(function(){ $("#popup").show(); }); ``` 这个例子中，`#popup`是div的ID，通过`display:none`隐藏初始状态。`position:fixed`确保它相对于浏览器窗口定位，`top:50%`和...

    jQuery遮罩弹出带步骤流程窗口代码.zip

    1. **遮罩层（Mask Layer）**：遮罩层用于覆盖整个页面，提供一个半透明的背景，突出显示弹出窗口。在jQuery中，可以通过创建一个全屏的div元素并设置其样式（如背景颜色、透明度等）来实现。使用CSS的`position: ...

    弹出漂亮登录窗口网页特效

    弹出窗口通常是通过JavaScript或者jQuery库来实现的，它们可以监听用户的交互事件，如点击，然后动态地创建并显示一个新的层或对话框。这种效果增强了用户体验，因为登录过程不会中断当前页面的浏览，而是以非侵入性...

    模仿MSN窗口右下角弹出对话框的js代码

    要实现弹出对话框，我们需要在页面底部创建一个新的div元素，作为弹出窗口的容器。使用`document.createElement('div')`创建div，然后通过`.innerHTML`、`.style`等属性设置其内容和样式。 2. **CSS样式控制**：...

    css3 jquery 弹出层实现漂亮的弹出层

    在网页设计中，弹出层（也称为模态窗口或对话框）是一种常见的交互元素，用于展示重要信息、用户确认操作或提供额外的功能区域。在本教程中，我们将深入探讨如何利用CSS3和jQuery来创建一个既美观又功能丰富的弹出层...

    js弹出层可拖动兼容各大浏览器.pdf

    在网页开发中，JavaScript 弹出层（通常称为对话框或模态窗口）是一种常见的交互设计元素，用于显示临时信息、用户确认或进行复杂操作。本文将详细讲解如何创建一个可拖动且兼容各大浏览器的 JavaScript 弹出层，并...

    JavaScript实现弹出DIV层同时页面背景渐变成半透亮效果_.docx

    JavaScript 实现弹出 DIV 层同时页面背景渐变成半透亮效果是一种常见的网页交互设计，它通常用于创建对话框、提示信息或者用户确认操作等场景。这种效果通过 JavaScript 控制 DOM 元素的动态变化来达成，使得用户...

    兼容所有浏览器的弹出层登录

    此外，为了模仿Win7的风格，我们可以使用CSS3的边框阴影效果来模拟Windows 7的窗口外观，添加圆角以增加视觉吸引力，还可以利用背景图像或渐变来创建更逼真的效果。对于按钮和其他UI元素，可以应用Win7的经典蓝色...

    网站弹窗代码，可以自定义弹出的窗口。

    这是弹出的内容 关闭 ``` 3. CSS样式： 使用CSS来定义弹窗的位置、大小、颜色等视觉属性。例如，可以将弹窗设置为居中显示，具有透明背景和渐变效果： ```css #popup { position: fixed; top: 50%; left: ...

    jQuery+CSS3实现的多套风格隐藏点击弹出登录窗口表单特效源码.zip

    该资源是一个基于jQuery和CSS3技术实现的登录窗口弹出特效源码，旨在为网站提供多样化的风格选择，实现点击后隐藏元素并显示登录表单的功能。以下将详细阐述jQuery和CSS3在其中的应用以及相关知识点。 **jQuery库**...

    jsWeb弹出框无依赖包括AlertConfirmToastLoadingNotifyModal

    本资源"jsWeb弹出框无依赖包括AlertConfirmToastLoadingNotifyModal"提供了一套完整的解决方案，无需依赖任何外部库，如jQuery或其他前端框架，使得开发者能够在纯JavaScript环境下方便地实现各种弹出框效果。...

    JS实现简单的右下角弹出提示窗口完整实例

    在脚本中，start()函数是弹出窗口的核心，它根据当前显示或隐藏的状态决定窗口的高度是逐渐增加还是减少，并通过setInterval()函数以固定的时间间隔来逐步调整提示窗口的高度。这样的渐变效果是通过changeH()函数...

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