js浮动层，但是网上搜索，不知如何下手。

jiguoguo 2009-02-04 01:40:56
就是看见那种效果。我就描述一下。网页实现，中间亮的。其他部分灰色透明。中间部分用户可操作。那个效果。我知道很简单。但是网上搜索，不知如何下手。请帮个忙。谢谢
...全文
479 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
blackberry8300 2009-02-04
  • 打赏
  • 举报
 回复
我把源码贴出来，你copy直接能用了。
首先是一段JS：

//弹出方法
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=40);":"opacity:0.40;";
back.style.cssText=styleStr;
document.body.appendChild(back);
var mesW=document.createElement("div");
mesW.id="mesWindow";
mesW.className="mesWindow";
mesW.innerHTML="<div class='mesWindowTop' style='BACKGROUND: #d0e5f6;'><table width='100%' height='100%'><tr><td style='FONT-SIZE: 13px;'>"+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)
{
obj.filters.alpha.opacity+=1;
if(obj.filters.alpha.opacity<endInt)
{
setTimeout(function(){showBackground(obj,endInt)},8);
}
}
//关闭窗口
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 testMessageBox1(ev,ss){
var objPos = mousePosition(ev);
messContent="<div style='padding:20px 0 20px 0;text-align:center' style='FONT-SIZE: 18px;BACKGROUND: #d0e5f6;'><form name='opeForm' action='' method='post' encType='multipart/form-data'>";
messContent+="<INPUT value='FBFILE' type='hidden' name='filepath'><input type='hidden' name='FBFILE_T_FILE/GROUP_ID' value='' />";
messContent+="<INPUT value='F' type='hidden' name='FBFILE_T_FILE/FILE_SAVE'><INPUT value='1' type='hidden' name='FBFILE_T_FILE/id'>";
messContent+="<table><tr><td style='FONT-SIZE: 12px;'>请选择文件:</td>";
messContent+="<td id='uploadfile'><INPUT type='file' style='WIDTH: 300px; HEIGHT: 22px' size='1' name='file'></td></tr>";
messContent+="<tr><td colspan='2' align='center' style='FONT-SIZE: 12px;'>【<A href='javascript:submitData();'>导入</A>】</td></tr></table></form></div>";
showMessageBox(ss,messContent,objPos,400);
}

上面桔色的方法中是定义一个table，内容你可以随意更改，你也可以把这段JS单独放入到一个JS文件中，在你的页面里去载入，这样可以简化页面，下面这段样式和JS必须放在页面里了：

<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
};
}
</script>

在使用的时候，只要在页面上的某个地方添加点击事件就行了：

<INPUT value="导入Excel" type="button" class="button" onclick="testMessageBox1(event,'导入Excel);
0041123 2009-02-04
  • 打赏
  • 举报
 回复
共两步：
1.在<head></head>中加入
<script language="JavaScript1.2">
function makevisible(cur,which){
if (which==0)
cur.filters.alpha.opacity=100
else

cur.filters.alpha.opacity=20

}

</script>

2.在<body></body>中加入
<a href="http://www.163.com"><img src="images/1.jpg" border=0 style="filter:alpha(opacity=20)" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)"></a>

ChinaXtHuLang 2009-02-04
  • 打赏
  • 举报
 回复
没见过。帮顶
CCNA_CCNP 思科网络认证 静态路由（默认路由、路由汇总、浮动路
Re：CCNA_CCNP 思科网络认证 静态路由（默认路由、路由汇总、浮动路由、热备份路由协议（HSRP）） ====================== # 本章内容         网络畅通的条件         ...
IOS设备设计完整指南
IOS设备设计完整指南 作为初学者，常常不知如何下手设计，IOS应用UI设计中碰到的种种基础小问题，在此都将一一得到解答。这份完整的设计指南将带你快速上手，为IOS设计出优雅的应用吧。 关于此设计指南 此设计指南描述的是如何按照苹果官方的 iOS 人机界面指南（HIG）为 iOS 设计应用，而不是如何设计自定义控件。这可以帮助大家打破规则。此文档只作指导作
ios设计指南
作为初学者，常常不知如何下手设计，IOS应用UI设计中碰到的种种基础小问题，在此都将一一得到解答。这份完整的设计指南将带你快速上手，为IOS设计出优雅的应用吧。 关于此设计指南 此设计指南描述的是如何按照苹果官方的 iOS 人机界面指南（HIG）为 iOS 设计应用，而不是如何设计自定义控件。这可以帮助大家打破规则。此文档只作指导作用，并非为了解决复杂的、特定的设计问题。
『IT视界』 [大话IT]中兴IT集体大逃亡
&lt;script language="javascript" type="text/javascript"&gt; function change_bodyground() { tech_body.className='body3'; } var colorrnd2=new Array("#6699cc","#669999","#CC66CC","#FF66F
前端个人年度工作述职报告（二十篇）
前端个人年度工作述职报告篇1尊敬的各位领导、各位同仁：大家好!按照20__年度我公司就职人员工作评估的安排和要求，我认真剖析、总结了自己的工作情况，现将本人工作开展情况向各位领导、同仁做以汇报，有不妥之处，希望大家批评指正。一、自律自省，团结协作，工作状态充满活力自20__年7月到公司工作，作为一名__的职员，我深知工作中“群策群力”的深刻道理。这半年多来，我在工作上积极尝试，在职场理念上不断更新，在规章制度面前坚持原则，在同事间春风送暖。一言一行经常提醒自己严于律己，当好公司的一兵。聆听领导对公司项目的决
ASP

28,390

社区成员

357,068

社区内容

发帖
与我相关
我的任务
社区描述
ASP即Active Server Pages，是Microsoft公司开发的服务器端脚本环境。
社区管理员
  • ASP
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章