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

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

这个效果用什么做方便，jquery吗？怎么做？

谢谢。
...全文
1213 14 打赏 收藏 转发到动态 举报
写回复
用AI写文章
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网页特效范例宝典源码
实例009 关闭IE主窗口时，不弹出询问对话框 13 1.2 弹出网页对话框 14 实例010 弹出网页模式对话框 14 实例011 弹出全屏显示的网页模式对话框 16 实例012 网页拾色器 18 实例013 日期选择器 21 1.3 窗口的动画效果 ...
点击登录按钮，弹出一个登录框
点击登录按钮，弹出一个登录框 首先将登录框写在一个div块里，里面放上登录框所需的各种信息，比如用户名、密码等，并将CSS样式里的display设置成none。然后在你的前端页面，比如index.html或者index.jsp中，有一个...
Div+Css页面布局实战
本套课程主要通过实战的方式让您快速学会网页布局，修改网页中的文本、背景、排版布局等，使开发者可以根据自己的需求设置不同的样式风格。
jq完成弹出一个div，浮在其他内容之上，并且后面不可点击
功能描述：弹出一个div层，悬浮在其它的内容之上。除了这个悬浮的div，其它div不可以操作，直到关闭这个div。 一、图片展示效果 1、初始样子 2、点击 按钮 之后效果 3、点击关闭按钮（X）之后的效果 二、...
click 弹出div
功能描述：弹出一个div层，悬浮在其它的内容之上。除了这个悬浮的div，其它div不可以操作，直到关闭这个div。 一、图片展示效果 1、初始样子 2、点击 按钮 之后效果 3、点击关闭按钮（X）之后的效果 二、...
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

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

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

+ 用AI写文章