<!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>无标题文档</title>
<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:50px;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="text-align:left";><a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div>
</body>
</html>
js网页中弹出小窗口,页面背景逐渐变为半透明
时间： 2024-09-23 07:16:16
js网页中弹出小窗口,页面背景逐渐变为半透明的相关文章
Dreamweaver MX 2004高级技巧(4)制作弹出小窗口
dreamweaver|高级|技巧 弹出窗口经常用于发布站内公告,或作为一个网站的广告来使用,今天给大家介绍如何使用Dreamweaver MX 2004制作弹出小窗口 1. 新建立一个html页面,设置页面属性.左边界,顶部边界为 0 ,在标题处输入标题名称. 2. 在页面中插入图片.也可以是文字, Flash 动画等.小窗口页面就准备好了. 让一个页面把刚才的小窗口弹出: 1. 新建一个需要添加弹出小窗口页面,当然也可以打开自己制作的网站的首页,在标签选择器中选择" body "标
JS实现在网页中弹出一个输入框的方法_javascript技巧
本文实例讲述了JS实现在网页中弹出一个输入框的方法.分享给大家供大家参考.具体分析如下: 习惯了使用早期给电脑文件夹设置密码的朋友一定还记得那种弹出一个输入框,然后让你输入密码在登录查看的效果吧,这个JS代码就是实现这个在当前页面中弹出一个输入框,当然你可以输入任何东西 <html> <head> <title>js输入对话框</title> </head> <body> <script language="javas
JS实现在网页中弹出一个输入框的方法
这篇文章主要介绍了JS实现在网页中弹出一个输入框的方法,实例分析了prompt的用法,可用来设置密码,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了JS实现在网页中弹出一个输入框的方法.分享给大家供大家参考.具体分析如下: 习惯了使用早期给电脑文件夹设置密码的朋友一定还记得那种弹出一个输入框,然后让你输入密码在登录查看的效果吧,这个JS代码就是实现这个在当前页面中弹出一个输入框,当然你可以输入任何东西 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 1
js-弹出小窗口，并获取返回值显示在主页面
问题描述 弹出小窗口,并获取返回值显示在主页面 获取地图经纬度,地图在小窗口显示,关闭后在主页面的input中显示 解决方案 现将百度地图生成到一个visibility为hidden的浮动层里面,并设置一个标注,将标注设置为可拖动,添加dragend事件用全局变量记录拖放后的经纬度(具体看这个:http://developer.baidu.com/map/index.php?title=jspopular/guide/cover#.E6.A0.87.E6.B3.A8),点击确定后隐藏层并且设置经
鼠标单击连接在网页中弹出提示窗口特效代码
网页特效代码,当在网页中用鼠标单击连接时,在网页中弹出个性提示小窗口.效果相当不错哦! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>提
JS控制弹出悬浮窗口(一览画面)的实例代码_javascript技巧
在web项目开发中经常遇到在一览画面中用户需要查看某一条记录的详细信息.如果用迁移画面的方式处理,速度会比较慢,而且用户体验不是太好.如果采用点击该条记录的详细链接时弹出一个层显示在当前画面的话,处理速度很快,而且用户感觉也比较新颖.下面我以某个对日电子商务网站为实例说明下它的实现方式. 1.jsp页面上弹出层的代码 <!-- 物流详情弹出页面 start --> <s:iterator value="lrVo" var="lrVo" id=&qu
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解_javascript技巧
本文实例讲述了JS实现弹出浮动窗口.分享给大家供大家参考.具体如下: 这里介绍的JS弹出浮动窗口,支持鼠标拖动和关闭,点击链接文字后弹出层窗口,也称作是弹出式对话框吧. 关于一些参数说明: bodycontent:要在窗口中显示的内容 title:窗口的标题 removeable:窗口是否能拖动 注意:内容窗体的高度是height-30px,请计算好要显示的内容高度和宽度. 注:在火狐或chrome下效果最佳,IE8下可能有些小问题. 点击此处查看运行效果: http://demo.jb51.n
indows open-JS弹出窗口为什么总是跳转，不是弹出小窗口？
问题描述 JS弹出窗口为什么总是跳转,不是弹出小窗口? window.open(""Detail.htm?ptid=""+cell0_self""'height='+iHeight+'innerHeight='+iHeight+'width='+iWidth+'innerWidth='+iWidth+'top='+y+'left='+x+'toolbar=nomenubar=noscrollbars=autoresizeable=nolocati
js实现点击图片改变页面背景图的方法
这篇文章主要介绍了js实现点击图片改变页面背景图的方法,实例分析了javascript操作css与图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了js实现点击图片改变页面背景图的方法.分享给大家供大家参考.具体实现方法如下: 代码如下: <html> <head> <title>点击图片即改变页面的背景图片</title> </head> <body bgcolor="#FFFFFF"