由于各种原因导致不能立即提交表单,此时不想用户点击按钮,需要提示并“屏蔽”网页事件。
官网参考代码:http://jquery.malsup.com/block/#page
实践代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
<html xmlns="http://www.w3.org/1999/xhtml"> | |
<head> | |
<title></title> | |
<link rel="Stylesheet" href="jquery-ui.css" /> | |
<link rel="Stylesheet" href="jq.css" /> | |
<link rel="Stylesheet" href="block.css" /> | |
<script type="text/javascript" src="jquery.min.js"></script> | |
<script type="text/javascript" src="jquery-ui.min.js"></script> | |
<script type="text/javascript" src="jquery.blockUI.js"></script> | |
<script type="text/javascript" src="chili-1.7.pack.js"></script> | |
<script type="text/javascript"> | |
$(function ($) { | |
"use strict"; | |
// global hook - unblock UI when ajax request completes | |
$(document).ajaxStop($.unblockUI); | |
$('#main').tabs({ | |
select: function (e, ui) { | |
var href = $(ui.tab).attr('href'); | |
window.location.hash = href; | |
} | |
}); | |
// | |
// page blocking example | |
// | |
$('#pageDemo1').click(function () { | |
$.blockUI(); | |
}); | |
$('#pageDemo2').click(function () { | |
$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' }); | |
}); | |
$('#pageDemo3').click(function () { | |
$.blockUI({ css: { backgroundColor: '#f00', color: '#fff'} }); | |
}); | |
$('#pageDemo4').click(function () { | |
$.blockUI({ message: $('#domMessage') }); | |
}); | |
}); | |
</script> | |
<style type="text/css"> | |
#overview h2 { border: 1px dashed gray; padding: 10px; background-color: #ffc; | |
color: black; font-size: medium; margin: 10px 0; | |
} | |
#footer { font-family: sans-serif; color: #888 } | |
#domMessage { padding: 10px; } | |
div.blockMe { padding: 30px; margin: 30px; border: 10px solid #ccc; background-color: #ffd } | |
#question { background-color: #ffc; padding: 10px; } | |
#question input { width: 4em } | |
#demoTable { border: 1px solid #ddd } | |
#demoTable tr.odd { background-color: #efe } | |
#demoTable th { padding: 15px; background-color: #ffa } | |
#demoTable td { padding: 15px; vertical-align: top } | |
#tallContent h1 { margin: 15px } | |
</style> | |
</head> | |
<body> | |
<div id="domMessage" style="display:none;"> | |
<h1>We are processing your request. Please be patient.</h1> | |
</div> | |
<p /> | |
<input id="pageDemo1" class="demo"type="submit"value="Default Message" /> | |
<input id="pageDemo2" class="demo"type="submit"value="Custom Message" /> | |
<input id="pageDemo3" class="demo"type="submit"value="Custom Style" /> | |
<input id="pageDemo4" class="demo"type="submit"value="DOM Element as Message" /> | |
<p /> | |
</body> | |
</html> |
源码下载 : http://download.csdn.net/detail/duhaomin/6337397
图片效果:
第二种:
源代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
//关闭等待窗口
function closediv() {
//Close Div
document.body.removeChild(document.getElementById("bgDiv"));
document.getElementById("msgDiv").removeChild(document.getElementById("msgTitle"));
document.body.removeChild(document.getElementById("msgDiv"));
}
//显示等待窗口
function showdiv(str) {
var msgw, msgh, bordercolor;
msgw = 400; //提示窗口的宽度
msgh = 100; //提示窗口的高度
bordercolor = "#336699"; //提示窗口的边框颜色
titlecolor = "#99CCFF"; //提示窗口的标题颜色
var sWidth, sHeight;
sWidth = window.screen.availWidth;
sHeight = window.screen.availHeight;
var bgObj = document.createElement("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";
document.body.appendChild(bgObj);
var msgObj = document.createElement("div")
msgObj.setAttribute("id", "msgDiv");
msgObj.setAttribute("align", "center");
msgObj.style.position = "absolute";
msgObj.style.background = "white";
msgObj.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
msgObj.style.border = "1px solid " + bordercolor;
msgObj.style.width = msgw + "px";
msgObj.style.height = msgh + "px";
msgObj.style.top = (document.documentElement.scrollTop + (sHeight - msgh) / 2) + "px";
msgObj.style.left = (sWidth - msgw) / 2 + "px";
var title = document.createElement("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 = closediv;
document.body.appendChild(msgObj);
document.getElementById("msgDiv").appendChild(title);
var txt = document.createElement("p");
txt.style.margin = "1em 0"
txt.setAttribute("id", "msgTxt");
txt.innerHTML = str;
document.getElementById("msgDiv").appendChild(txt);
}
//屏蔽F5
document.onkeydown = mykeydown;
function mykeydown() {
if (event.keyCode == 116) //屏蔽F5刷新键
{
window.event.keyCode = 0;
return false;
}
}
</script>
</head>
<body>
<form id="form1">
<div>
<INPUT οnclick="showdiv('表达数据提交中<br/>请稍候........ <br/>' );" type="button" value="提交数据">
</div>
</form>
</body>
</html>
第三种:
<html>
<title>页面提交时出现等待窗口示例</title>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!--
//By Dicky 2005-2-17 11:16:49
function Window_Load(Flag)
{
if (Flag == 0)
{
document.all['Loading'].style.display = 'block';
//show the window
}
else
{
document.all['Loading'].style.display = 'none';
//hide the window
}
}
//-->
</SCRIPT>
</head>
<body leftMargin=0 topMargin=50 οnlοad="Window_Load(1);">
<div id="Loading" style="position:absolute;z-index:3;top:200px;left:250px;width:250;height:60;border-width:1;border-style:ridge;background-color:green;padding-top:10px"><center><table border="0"><tr><td valign="middle"><img src="http://doc.readmen.com/10/cursor.gif" border="0" WIDTH="30" HEIGHT="30"></td><td> </td><td valign="middle"><span id=txtLoading0 style="font-size:14px;">正在初始化页面,请稍候...</span><br><span id=txtLoading1 style="font-size:14px;">Loading,please wait...</span></td></tr></table></center></div>
<form name="form1" method="post" action="" onSubmit="Window_Load(0);">
<center>页面提交时出现等待窗口示例<input name=submit type=submit value='提交'>
</center>
</form>
</body>
</html>