社区
Ajax
帖子详情
用JS弹出网页对话框后,如何让后面那一层变灰。
ABC从
2007-09-16 01:09:21
如题,我想用JS弹出网页对话框后,后面那一怪变灰,变成不可操做。
...全文
1759
13
打赏
收藏
用JS弹出网页对话框后,如何让后面那一层变灰。
如题,我想用JS弹出网页对话框后,后面那一怪变灰,变成不可操做。
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
13 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
tigerwuaq
2007-09-18
打赏
举报
回复
简单:
模态调用嘛
qinjingfeng
2007-09-18
打赏
举报
回复
右键-查看源文件
慢慢看吧...
xunuo230
2007-09-18
打赏
举报
回复
...
CoffeeShop
2007-09-17
打赏
举报
回复
就是在整个页面上放二个层
一个是背景层用来遮罩;
一个层用来显示操作页面
用Prototype.js
<script language="javascript">
{
$('bgDiv').style.display = ""; //背景层变灰的层 不可以操作
$('ShowDiv').style.display = "";//显示层 可以操作的
$w('ShowDiv').each(Element.show);
var url = '你要在新层上打开的页面';
var myAjax = new Ajax.Updater(
{success: 'ShowDiv'},url,{method: 'post'});
}
</script>
Epiphone
2007-09-17
打赏
举报
回复
做人要厚道 楼主请给分
Epiphone
2007-09-17
打赏
举报
回复
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
*{margin:0;padding:0;}
</style>
</head>
<body>
<p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p>
<p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p>
<input type="button" value="点击这里" onclick="sAlert('测试效果<br/>嗯!效果还不错!');" />
<script type="text/javascript" language="javascript">
function sAlert(str){
var msgw,msgh,bordercolor;
msgw=400;//提示窗口的宽度
msgh=100;//提示窗口的高度
titleheight=25 //提示窗口标题高度
bordercolor="#336699";//提示窗口的边框颜色
titlecolor="#99CCFF";//提示窗口的标题颜色
var sWidth,sHeight;
sWidth=document.body.offsetWidth;//浏览器工作区域内页面宽度
sHeight=screen.height;//屏幕高度(垂直分辨率)
//背景层(大小与窗口有效区域相同,即当弹出对话框时,背景显示为放射状透明灰色)
var bgObj=document.createElement("div");//创建一个div对象(背景层)
//定义div属性,即相当于
//<div id="bgDiv" style="position:absolute; top:0; background-color:#777; filter:progid:DXImagesTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75); opacity:0.6; left:0; width:918px; height:768px; z-index:10000;"></div>
bgObj.setAttribute('id','bgDiv');
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.background="#777";
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
bgObj.style.opacity="0.6";
bgObj.style.left="0";
bgObj.style.width=sWidth + "px";
bgObj.style.height=sHeight + "px";
bgObj.style.zIndex = "10000";
document.body.appendChild(bgObj);//在body内添加该div对象
var msgObj=document.createElement("div")//创建一个div对象(提示框层)
//定义div属性,即相当于
//<div id="msgDiv" align="center" style="background-color:white; border:1px solid #336699; position:absolute; left:50%; top:50%; font:12px/1.6em Verdana,Geneva,Arial,Helvetica,sans-serif; margin-left:-225px; margin-top:npx; width:400px; height:100px; text-align:center; line-height:25px; z-index:100001;"></div>
msgObj.setAttribute("id","msgDiv");
msgObj.setAttribute("align","center");
msgObj.style.background="white";
msgObj.style.border="1px solid " + bordercolor;
msgObj.style.position = "absolute";
msgObj.style.left = "50%";
msgObj.style.top = "50%";
msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
msgObj.style.marginLeft = "-225px" ;
msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
msgObj.style.width = msgw + "px";
msgObj.style.height =msgh + "px";
msgObj.style.textAlign = "center";
msgObj.style.lineHeight ="25px";
msgObj.style.zIndex = "10001";
var title=document.createElement("h4");//创建一个h4对象(提示框标题栏)
//定义h4的属性,即相当于
//<h4 id="msgTitle" align="right" style="margin:0; padding:3px; background-color:#336699; filter:progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100); opacity:0.75; border:1px solid #336699; height:18px; font:12px Verdana,Geneva,Arial,Helvetica,sans-serif; color:white; cursor:pointer;" onclick="">关闭</h4>
title.setAttribute("id","msgTitle");
title.setAttribute("align","right");
title.style.margin="0";
title.style.padding="3px";
title.style.background=bordercolor;
title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
title.style.opacity="0.75";
title.style.border="1px solid " + bordercolor;
title.style.height="18px";
title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
title.style.color="white";
title.style.cursor="pointer";
title.innerHTML="关闭";
title.onclick=removeObj;
var button=document.createElement("input");//创建一个input对象(提示框按钮)
//定义input的属性,即相当于
//<input type="button" align="center" style="width:100px; align:center; margin-left:250px; margin-bottom:10px;" value="关闭">
button.setAttribute("type","button");
button.setAttribute("value","关闭");
button.style.width="60px";
button.style.align="center";
button.style.marginLeft="250px";
button.style.marginBottom="10px";
button.style.background=bordercolor;
button.style.border="1px solid "+ bordercolor;
button.style.color="white";
button.onclick=removeObj;
function removeObj(){//点击标题栏触发的事件
document.body.removeChild(bgObj);//删除背景层Div
document.getElementById("msgDiv").removeChild(title);//删除提示框的标题栏
document.body.removeChild(msgObj);//删除提示框层
}
document.body.appendChild(msgObj);//在body内添加提示框div对象msgObj
document.getElementById("msgDiv").appendChild(title);//在提示框div中添加标题栏对象title
var txt=document.createElement("p");//创建一个p对象(提示框提示信息)
//定义p的属性,即相当于
//<p style="margin:1em 0;" id="msgTxt">测试效果</p>
txt.style.margin="1em 0"
txt.setAttribute("id","msgTxt");
txt.innerHTML=str;//来源于函数调用时的参数值
document.getElementById("msgDiv").appendChild(txt);//在提示框div中添加提示信息对象txt
document.getElementById("msgDiv").appendChild(button);//在提示框div中添加按钮对象button
}
</script>
</body>
</html>
ABC从
2007-09-17
打赏
举报
回复
实像就是163邮件一样,点删除邮件时,出一个网页对话框,后面全变灰,并不可用。
ABC从
2007-09-17
打赏
举报
回复
哪位朋友能给段Demo
Go 旅城通票
2007-09-17
打赏
举报
回复
<html>
<head>
<title>Mark</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<script type="text/javascript">
function GetMark()
{
var eif=document.getElementById('hideIframe');
if(eif!=null)
{
document.body.bgColor='black';
eif.style.display="";
}
else
{
var e=document.createElement("iframe");
e.id="hideIframe";
e.scrolling="no";
e.frameborder=0;
e.style.position="absolute";
e.style.top=0;
e.style.left=0;
e.style.margin=0;
e.style.width='100%';
e.style.height='100%';
e.style.filter="Alpha(style=0,opacity=30)";
document.body.appendChild(e);
e.document.body.bgColor='black';
e.contentWindow.document.write("<div align='center' style='position:absolute;top:"+document.body.clientHeight/2+";width:100%'><font size='5'><b>正在处理您的请求......</b></font></div>");
//e.contentWindow.document.body.onclick=HideIf;
}
}
function HideIf()
{
document.getElementById('hideIframe').style.display="none";
document.body.bgColor="";
}
</script></head>
<body style="margin:0px">
<input type="button" id="btn1" onclick="GetMark()" value="获取Mark"/>
<div style="background-color"
</body>
</html>
hejunbin
2007-09-16
打赏
举报
回复
一个覆盖整个页面的层,设置透明度O.o
xyz2011
2007-09-16
打赏
举报
回复
很简单嘛!
在jsp页面上(表头)加上
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 1.0 Transitional//EN>
把你以前的改变成上面上那样就行了。
ABC从
2007-09-16
打赏
举报
回复
还要让后面那一层不能操作呢。
tantaiyizu
2007-09-16
打赏
举报
回复
css 设置其透明度
点击一个超链接
弹出
一个
对话框
在页面中一个超级链接可以
弹出
一个
对话框
可以在
对话框
中进行操作。比如修改密码等
DIY的
JS
弹出
层
弹出
对话框
弹出
页面
弹出
窗口的插件
今天要共享一款基于jQuery1.6的弹层插件lyz.layer1.0,该能在浏览器界面上显示非常好的体验效果,它可以通过配置不同属性来实现多样功能化,含:弹信息框、
弹出
层、弹窗口、
弹出
HTML代码等等。
一个漂亮的
弹出
层模态框和
对话框
一个漂亮的
弹出
层、模态框和
对话框
artDialog 漂亮的javascript
对话框
(
弹出
层)组件
javascript
对话框
(
弹出
层)组件artDialog artDialog是一个轻巧且高度兼容的javascript
对话框
组件,可让你的
网页
交互拥有桌面软件般的用户体验。 演示地址:http://www.planeart.cn/downs/artDialog/ 项目主页:...
jQuery
弹出
层
对话框
插件.zip
jQuery
弹出
层
对话框
插件是一款点击按钮
弹出
确定取消按钮代码。
Ajax
52,797
社区成员
25,305
社区内容
发帖
与我相关
我的任务
Ajax
Web 开发 Ajax
复制链接
扫一扫
分享
社区描述
Web 开发 Ajax
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章