JQuery 代码适用于所有浏览器，但不适用于 IE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
<head>
<meta http-equiv="Content-Language" content="pt-br" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/cupertino/jquery-ui.css"
rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/form.js"></script>
<script type="text/javascript">
$(function() {
$("#loginform")
.submit(
function(event) {
event.preventDefault();
var data = $("#loginform").serialize();
$("#aviso").removeClass().addClass('messagebox')
.text('Validando dados...').fadeIn(1000);
var options = {
url : 'valida.php',
dataType : 'json',
success : function(data) {
if (data == 'liberado') {
$("#aviso")
.fadeTo(
200,
1,
function() {
$(this)
.text(
'Redirecionando...')
.addClass(
'messageboxok')
.fadeTo(
900,
1,
function() {
$(
this)
.removeClass()
.html(
'');
document.location = 'index.php';
});
});
} else if (data == 'bloqueado') {
$("#aviso")
.fadeTo(
200,
0.1,
function() {
$(this)
.text(
'Usuário e/ou Senha Inválidos.')
.addClass(
'messageboxerror')
.fadeTo(
900,
1);
});
}
}
}
$('#loginform').ajaxSubmit(options);
return false;
});
});
</script>
<script>
$(function() {
$("#modal-form").dialog({
bgiframe : false,
width : 270,
//width: 220,
modal : true,
open : function(event, ui) {
$('.ui-dialog-titlebar-close').hide();
}
});
});
$(function() {
$("button, input:submit").button();
});
</script>
<style>
* {
font-size: 14px;
}
#msgbox {
font-family: sans-serif;
font-size: 11px;
}
.messagebox { /*position:absolute;*/
width: 240px;
border: 1px solid #c93;
background: #ffc;
padding: 3px;
}
.messageboxok { /*position:absolute;*/
width: 240px;
border: 1px solid #349534;
background: #C9FFCA;
padding: 3px;
font-weight: bold;
color: #008000;
}
.messageboxerror { /*position:absolute;*/
width: 240px;
border: 1px solid #CC0000;
background: #F7CBCA;
padding: 3px;
font-weight: bold;
color: #CC0000;
margin-right: 0px;
}
</style>
</head>
<body>
<div id="modal-form">
<p id="aviso"></p>
<form id="loginform" method="post" action="valida.php">
<table width="13%" cellspacing="5">
<tr>
<td align="right" width="20%"><b>Login:</b></td>
<td width="65%"><input type="text" id="usuario" name="usuario"
size="20" /></td>
</tr>
<tr>
<td align="right" width="20%"><b>Senha:</b></td>
<td width="65%"><input type="password" id="senha" name="senha"
size="20" /></td>
</tr>
<tr>
<td colspan="2">
<p align="center"><input type="submit" id="logar" value="Logar" />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
<head>
<meta http-equiv="Content-Language" content="pt-br" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/cupertino/jquery-ui.css"
rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/form.js"></script>
<script type="text/javascript">
$(function() {
$("#loginform")
.submit(
function(event) {
event.preventDefault();
var data = $("#loginform").serialize();
$("#aviso").removeClass().addClass('messagebox')
.text('Validando dados...').fadeIn(1000);
var options = {
url : 'valida.php',
dataType : 'json',
success : function(data) {
if (data == 'liberado') {
$("#aviso")
.fadeTo(
200,
1,
function() {
$(this)
.text(
'Redirecionando...')
.addClass(
'messageboxok')
.fadeTo(
900,
1,
function() {
$(
this)
.removeClass()
.html(
'');
document.location = 'index.php';
});
});
} else if (data == 'bloqueado') {
$("#aviso")
.fadeTo(
200,
0.1,
function() {
$(this)
.text(
'Usuário e/ou Senha Inválidos.')
.addClass(
'messageboxerror')
.fadeTo(
900,
1);
});
}
}
}
$('#loginform').ajaxSubmit(options);
return false;
});
});
</script>
<script>
$(function() {
$("#modal-form").dialog({
bgiframe : false,
width : 270,
//width: 220,
modal : true,
open : function(event, ui) {
$('.ui-dialog-titlebar-close').hide();
}
});
});
$(function() {
$("button, input:submit").button();
});
</script>
<style>
* {
font-size: 14px;
}
#msgbox {
font-family: sans-serif;
font-size: 11px;
}
.messagebox { /*position:absolute;*/
width: 240px;
border: 1px solid #c93;
background: #ffc;
padding: 3px;
}
.messageboxok { /*position:absolute;*/
width: 240px;
border: 1px solid #349534;
background: #C9FFCA;
padding: 3px;
font-weight: bold;
color: #008000;
}
.messageboxerror { /*position:absolute;*/
width: 240px;
border: 1px solid #CC0000;
background: #F7CBCA;
padding: 3px;
font-weight: bold;
color: #CC0000;
margin-right: 0px;
}
</style>
</head>
<body>
<div id="modal-form">
<p id="aviso"></p>
<form id="loginform" method="post" action="valida.php">
<table width="13%" cellspacing="5">
<tr>
<td align="right" width="20%"><b>Login:</b></td>
<td width="65%"><input type="text" id="usuario" name="usuario"
size="20" /></td>
</tr>
<tr>
<td align="right" width="20%"><b>Senha:</b></td>
<td width="65%"><input type="password" id="senha" name="senha"
size="20" /></td>
</tr>
<tr>
<td colspan="2">
<p align="center"><input type="submit" id="logar" value="Logar" />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
你的
body元素在哪里？为什么您的脚本位于
html元素之外？我怀疑修复这些错误就能解决问题。
Where's your
bodyelement?Why is your script outside of the
htmlelement?Fixing these errors, I suspect, will solve the problem.