点击登陆按钮后,弹出一个div,表示等待,主页面变灰,

liuhui810 2010-02-22 03:10:06
点击登陆按钮后,弹出一个div,表示等待,主页面变灰。验证成功后,此div消失。

这个效果用什么做方便,jquery吗?怎么做?

谢谢。
...全文
1177 14 打赏 收藏 举报
写回复
14 条回复
切换为时间正序
请发表友善的回复…
发表回复
binge527533052 2011-05-03
  • 打赏
  • 举报
回复
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<link href="images/webcss.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<style type="text/css">
body{
scrollbar-face-color: #d2ebf9;
scrollbar-highlight-color: #f5fcff;
scrollbar-shadow-color: #9fccec;
scrollbar-arrow-color: #3a75bf;
scrollbar-dark-shadow-color: #e8f0f1;
scrollbar-3dlight-color:#9fccec;
scrollbar-track-color:#eef4f5;
background-color:transparent;
padding:0;
margin:0;
}
table {
font-size: 13px;
line-height:21px;
}
</style>
<script type="text/javascript">
function check(){
var apptitle=document.getElementById("apptitle").value;
if(apptitle==""){
document.getElementById("apptitleTip").innerHTML="<font style='FONT-SIZE: 10pt' color='red'><img src='images/onError.gif' width='22' height='22' >报表标题不能为空!</font>";
//document.getElementById("apptitle").focus();
return false;
}
var apptext=document.getElementById("apptext").value;
var dong=document.getElementById("dong");

if(apptext==""){
document.getElementById("apptextTip").innerHTML="<font style='FONT-SIZE: 10pt' color='red'><img src='images/onError.gif' width='22' height='22' >数据指标和要求不能为空!</font>";
// document.getElementById("apptext").focus();
return false;
}
var appfile=document.getElementById("appfile").value;
var strtype=appfile.substring(appfile.length-3,appfile.length);
strtype=strtype.toLowerCase();
if(appfile==""){
dong.style.display='block';
return true;
}else if (strtype=="xls"){
return true;
}else if (strtype=="doc"){
return true;
}else{
alert("这种文件类型不允许上传!\r\n只允许上传文件为xls和doc后缀名\r\n请选择文件并重新上传。");
form1.appfile.focus();
return false;
}

dong.style.display='block';
return true;
}
function onblurCheck(){
document.getElementById("apptitleTip").innerHTML="";
document.getElementById("apptextTip").innerHTML="";

}

</script>
</head>

<body>
<div style="background-image:url(images/011.gif);background-repeat:repeat-x; height:43px; line-height:46px; padding-left:15px;"> <span style="height:43px; line-height:46px; float:left; padding:13px 5px 0 0; "><img src="images/dqwz.gif" width="16" height="16"></span>当前位置:<a href="welcome.html">首页</a> > 申请数据整理</div>
<div style="height:480px; overflow:scroll;">
<form action="applyfor.do?method=instrApplyfor" enctype="multipart/form-data" method="post" name="form1" id="form1" onsubmit="javascript:return check(); return true ;this.sub.disabled='true';">
<table width="100%" border="0" cellspacing="0" cellpadding="3">
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td width="38%" align="right">标题:</td>
<td width="62%"><input name="apptitle" type="text" class="ipt" id="apptitle" maxlength="50" onblur="onblurCheck()" />
<span id="apptitleTip"></span>
</td>
</tr>
<tr>
<td align="right" valign="top">数据指标和要求:</td>
<td><textarea name="apptext" cols="50" rows="5" maxlength="4000" class="ipt" id="apptext" onblur="onblurCheck()"></textarea>
<br/><span id="apptextTip"></span></td>
</tr>
<tr>
<td align="right" valign="top">附件上传:</td>
<td><input type="file" name="appfile" cols="50" rows="5" class="ipt" id="appfile"><font size='-1'>请上传扩展名为xls和doc的文件!</font>
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2" align="center"><input type="image" name="sub" id="sub" src="images/034.gif" width="91" height="27"></td>
</tr>
</table>
</form>

<div id="doing" style="display:none; Z-INDEX: 12000; LEFT: 0px; WIDTH: 100%; CURSOR: wait; POSITION: absolute; TOP: 56px; HEIGHT: 100%">
<table width="100%" height="100%">
<tr align="center" valign="middle">
<td>
<table width="169" height="62" bgcolor="#99cccc" style="FILTER: Alpha(Opacity=75); WIDTH: 169px; HEIGHT: 62px">
<tr align="center" valign="middle">
<td>数据正在提交中...<br>
Loading...</td>
</tr>
</table>
</td>
</tr>
</table>
</div>



</div>

</body>
</html>
binge527533052 2011-05-03
  • 打赏
  • 举报
回复
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<link href="images/webcss.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<style type="text/css">
body{
scrollbar-face-color: #d2ebf9;
scrollbar-highlight-color: #f5fcff;
scrollbar-shadow-color: #9fccec;
scrollbar-arrow-color: #3a75bf;
scrollbar-dark-shadow-color: #e8f0f1;
scrollbar-3dlight-color:#9fccec;
scrollbar-track-color:#eef4f5;
background-color:transparent;
padding:0;
margin:0;
}
table {
font-size: 13px;
line-height:21px;
}
</style>
<script type="text/javascript">
function check(){
var apptitle=document.getElementById("apptitle").value;
if(apptitle==""){
document.getElementById("apptitleTip").innerHTML="<font style='FONT-SIZE: 10pt' color='red'><img src='images/onError.gif' width='22' height='22' >报表标题不能为空!</font>";
//document.getElementById("apptitle").focus();
return false;
}
var apptext=document.getElementById("apptext").value;
var dong=document.getElementById("dong");

if(apptext==""){
document.getElementById("apptextTip").innerHTML="<font style='FONT-SIZE: 10pt' color='red'><img src='images/onError.gif' width='22' height='22' >数据指标和要求不能为空!</font>";
// document.getElementById("apptext").focus();
return false;
}
var appfile=document.getElementById("appfile").value;
var strtype=appfile.substring(appfile.length-3,appfile.length);
strtype=strtype.toLowerCase();
if(appfile==""){
dong.style.display='block';
return true;
}else if (strtype=="xls"){
return true;
}else if (strtype=="doc"){
return true;
}else{
alert("这种文件类型不允许上传!\r\n只允许上传文件为xls和doc后缀名\r\n请选择文件并重新上传。");
form1.appfile.focus();
return false;
}

dong.style.display='block';
return true;
}
function onblurCheck(){
document.getElementById("apptitleTip").innerHTML="";
document.getElementById("apptextTip").innerHTML="";

}

</script>
</head>

<body>
<div style="background-image:url(images/011.gif);background-repeat:repeat-x; height:43px; line-height:46px; padding-left:15px;"> <span style="height:43px; line-height:46px; float:left; padding:13px 5px 0 0; "><img src="images/dqwz.gif" width="16" height="16"></span>当前位置:<a href="welcome.html">首页</a> > 申请数据整理</div>
<div style="height:480px; overflow:scroll;">
<form action="applyfor.do?method=instrApplyfor" enctype="multipart/form-data" method="post" name="form1" id="form1" onsubmit="javascript:return check(); return true ;this.sub.disabled='true';">
<table width="100%" border="0" cellspacing="0" cellpadding="3">
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td width="38%" align="right">标题:</td>
<td width="62%"><input name="apptitle" type="text" class="ipt" id="apptitle" maxlength="50" onblur="onblurCheck()" />
<span id="apptitleTip"></span>
</td>
</tr>
<tr>
<td align="right" valign="top">数据指标和要求:</td>
<td><textarea name="apptext" cols="50" rows="5" maxlength="4000" class="ipt" id="apptext" onblur="onblurCheck()"></textarea>
<br/><span id="apptextTip"></span></td>
</tr>
<tr>
<td align="right" valign="top">附件上传:</td>
<td><input type="file" name="appfile" cols="50" rows="5" class="ipt" id="appfile"><font size='-1'>请上传扩展名为xls和doc的文件!</font>
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2" align="center"><input type="image" name="sub" id="sub" src="images/034.gif" width="91" height="27"></td>
</tr>
</table>
</form>

<div id="doing" style="display:none; Z-INDEX: 12000; LEFT: 0px; WIDTH: 100%; CURSOR: wait; POSITION: absolute; TOP: 56px; HEIGHT: 100%">
<table width="100%" height="100%">
<tr align="center" valign="middle">
<td>
<table width="169" height="62" bgcolor="#99cccc" style="FILTER: Alpha(Opacity=75); WIDTH: 169px; HEIGHT: 62px">
<tr align="center" valign="middle">
<td>数据正在提交中...<br>
Loading...</td>
</tr>
</table>
</td>
</tr>
</table>
</div>



</div>

</body>
</html>
liuhui810 2010-02-25
  • 打赏
  • 举报
回复
引用 11 楼 lieri111 的回复:
要弹出层,又要非弹出层,楼主你说清楚些


对不起,我再说清楚一些:
当 div弹出层 show时,我不想让他成为模式窗口。也就是说,点击这个 div弹出层 以外的地方后,就会hide这个 div弹出层。怎么做?
passself 2010-02-24
  • 打赏
  • 举报
回复
要弹出层,又要非弹出层,楼主你说清楚些
liuhui810 2010-02-24
  • 打赏
  • 举报
回复
我是lz,还有疑问。当弹出层show时,我不想让他成为模式窗口,也就是说,点击非弹出层后,就会hide这个弹出层。问题来了,如何选择非弹出层?
tank_2009 2010-02-23
  • 打赏
  • 举报
回复
cloudgamer 2010-02-23
  • 打赏
  • 举报
回复
这里有一个类似的弹出层效果
teemai 2010-02-22
  • 打赏
  • 举报
回复

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>LIGHTBOX EXAMPLE</title>
<style>
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity = 80);
}

.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index: 1002;
overflow: auto;
}
</style>
</head>
<body>
可以根据自己要求修改css样式
<a href="javascript:void(0)"
onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">点击这里打开窗口</a>
<div id="light" class="white_content">
This is the lightbox content.
<a href="javascript:void(0)"
onclick=
document.getElementById('light').style.display = 'none';
document.getElementById('fade').style.display = 'none';
>
Close</a>
</div>
<div id="fade" class="black_overlay">
</div>
</body>
</html>
shan1119 2010-02-22
  • 打赏
  • 举报
回复
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
window.onload=(function(){
$("input:button:eq(0)").click(function(){
alert("success");
$("#div1").hide();
$("body").css({
position:"absolute",
filter:"alpha(style=0,opacity=100)",
background:"#FFF"
});
});
$("input:button:eq(1)").click(function(){
$("#div1").show();
$("body").css({
position:"absolute",
filter:"alpha(style=0,opacity=50)",
background:"#DDD"
});
});

});
</script>
</head>
<body>
<div id=div1 style="position:absolute;display:none;top:200px;left:200px;background:#FFF;width:100px;height:100px;">wait...<input type=button></div>
<input type=button>
</body>
</html>
jol_boy 2010-02-22
  • 打赏
  • 举报
回复
关键词:遮幕层。呵呵,一搜一箩筐啦
qqzeng-ip 2010-02-22
  • 打赏
  • 举报
回复
jQuery blackUI
changshoujun 2010-02-22
  • 打赏
  • 举报
回复
js……用弹出层~Google上很多例子的~
相关推荐
发帖
JavaScript

8.7w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2010-02-22 03:10
社区公告
暂无公告