公司最近做设备软件，发现用户使用自助设备（类似提款机）时点击按钮之后，发现没反应（其实正在与后台交互），就继续按，结果提交了很多次，老项目了，的确不够人性化，我给加了一个提示，点击后创建一层div锁定屏幕，防止用户连续提交。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>点击锁定屏幕，只对IE有效</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=gbk">
<link rel="stylesheet" type="text/css" href="./styles.css">
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script>
function stopEvent(){
event.returnValue=false;
};
//创建一层div，覆盖原有屏幕，锁定其他按键等
function lockScreen(){
//使用screen.width和height，容易产生超出窗口大小的滚动条，最好使用window的width
//var w = screen.width;
//var h = screen.height;
var w = $(window).width();
var h = $(window).height();
var x = $(window).scrollLeft();
var y = $(window).scrollTop();
//创建一层div遮盖，大小是窗口大小
$("<div>").css({
position:"absolute",
width:w,
height:h,
left:x,
top:y,
filter:"alpha(opacity=60)",
"background-color":"#f0f8ff"
}).html("正在处理，请稍等").appendTo("body").slideDown(200);
//锁定所有按键
document.onkeydown = function(){
if(event.keyCode == 13){
$("#d").slideUp(500);
}
if(event.keyCode == 17 || event.keyCode == 16){
//ctrl,shift键有时无法使用event.keyCode=0;
}else{
event.keyCode=0;
}
event.returnValue=false;
};
document.oncontextmenu = stopEvent;//屏蔽鼠标左右键、
document.onselectstart = stopEvent;//无法选择文字
document.ondragstart = stopEvent;//禁止鼠标在网页上拖动
document.onsource = stopEvent;
//屏蔽滚动条暂无
}
$(function(){
$("#but").click(function(){
lockScreen();
});
});
</script>
</head>
<body>
<input id="but" type="button" style="position:absolute;left:800px;top:expression(parseInt(document.body.scrollTop)+500);" value="我是按钮" />
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
<h1>一失足成千古风流人物</h1>
</body>
</html>
分享到：
相关推荐
本资源"jQuery点击按钮弹出遮罩层并固定居中特效源码.zip"提供了一个利用jQuery实现的功能：当用户点击按钮时，能够弹出一个遮罩层，并且这个遮罩层会居中显示。这个功能在网页设计中非常常见，例如用于显示模态...
**jQuery仿手机屏幕触屏滑动手势解锁代码详解** 在当今移动设备普及的时代，许多开发者都在寻找能够模拟手机屏幕滑动解锁效果的技术。这个“jQuery仿手机屏幕触屏滑动手势解锁代码”就是一个很好的实现，它利用...
在网页开发中，用户体验是至关重要的，当用户点击按钮或进行某些操作时，如果页面没有即时反馈，用户可能会感到疑惑或者不耐烦。这时，我们可以使用jQuery BlockUI.js插件来创建一个加载提示，告诉用户数据正在加载...
这种机制模仿了智能手机上的屏幕锁定方式，增加了用户体验的趣味性。本文将深入探讨如何使用jQuery实现一个基于触屏和鼠标操作的滑动手势解锁功能。 首先，我们要理解这个项目的基本结构。从提供的文件列表来看，...
- **lock**：锁定屏幕，禁止用户与对话框之外的页面交互。 - **skin**：自定义皮肤样式。 - **border**：是否显示边框。 - **icon**：定义消息图标。 - **id**：自定义对话框ID，用于防止重复弹出和获取API接口。 - ...
标题中的“jquery做的一个简单的屏幕锁定提示框”指的是使用jQuery库来实现的一个基本的屏幕锁定功能，即在用户点击特定元素（例如按钮）时，会在屏幕上弹出一个半透明的遮罩层，同时显示一个提示信息。这个功能常...
使用jQuery，我们为按钮添加了点击事件监听器，当点击按钮时，弹出层淡入显示；同时，我们还为关闭按钮和整个弹出层添加了点击事件监听器，使得点击这些区域时，弹出层淡出关闭。 总结来说，jQuery弹出层是一种强大...
在给定的“jquery模拟键盘”主题中，我们主要关注的是如何利用jQuery创建一个功能完善的虚拟键盘，使得用户可以通过点击屏幕上的按钮来输入字符，这在移动设备或特殊应用场景中非常有用。 首先，让我们深入了解一下...
4. 锁定背景：利用CSS，可以将模态框之外的页面元素设置为半透明或不可点击，以确保用户专注于模态框内容。 CSS特效在模态框设计中至关重要，可以用于： 1. 自定义样式：调整模态框的边框、背景色、字体、阴影等，...
10. **用户界面设计**：裁剪工具的界面设计需要直观且易于使用，可能包括拖动选择框、旋转按钮、比例锁定等功能，以满足用户多样化的需求。 综上所述，“jQuery新浪微博头像裁切预览代码”是一个集成了jQuery、图像...
5. 防止快速连续点击：添加延迟或者锁定机制，防止用户在动画未完成时连续触发切换。 在实际开发中，我们还需要考虑响应式设计，确保幻灯片在不同设备和屏幕尺寸下都能正常工作。可以使用媒体查询（`@media`）来...
- 利用jQuery Mobile提供的UI组件来构建视图层，如按钮、列表等。 - 在Backbone的View中，可以通过jQuery Mobile的API来实现动态效果，如页面切换、数据加载等。 - **案例研究**: 参考给定的链接，深入理解...
2. **媒体查询锁定设备**：使用CSS媒体查询，根据设备屏幕尺寸调整布局，如iPad的双列布局和智能手机的单列布局。 3. **Font-face字体替换**：在jQuery Mobile应用中，font-face是最简便且性能良好的字体加载方法。...
- 锁定屏幕：使用`overlay`选项，可以设置一个全屏遮罩，防止用户与背景内容交互。 - 关闭按钮：可以通过`closeButton`选项决定是否显示关闭按钮，或者自定义关闭按钮的位置和行为。 4. **使用须知**： - 兼容性...
lock: true // 锁定屏幕，防止用户操作其他部分 }); ``` 3. **自定义事件处理**：通过设置`ok`和`cancel`回调函数，可以处理用户的确认或取消操作。这些函数接收一个参数，即当前对话框的实例，可以用来进一步...
九宫格是一种常见的网页布局方式，它将屏幕划分为9个相等的方格，通常用于展示图片、卡片或者按钮等元素。通过CSS样式和JavaScript的计算，我们可以动态调整每个单元格的大小，以适应不同屏幕尺寸，实现响应式设计。...
描述中提到的分页按钮是fullPage.js的一个关键特性，它允许用户通过点击导航按钮在不同的全屏页面间切换，提供了更直观的交互方式。这些按钮通常位于页面的侧边或底部，可以自定义样式以适应网站的整体设计。 3. *...
例如，当用户点击某个按钮时，可以将Div的`position`改为`fixed`，实现锁定效果。 ```javascript $("#lockDiv").click(function() { $(this).css("position", "fixed"); }); ``` 4. **服务器端处理**：在C#代码中，...
2. **事件绑定**：使用jQuery的`on()`方法绑定点击事件到每个数字按钮，当用户点击按钮时，会触发相应的事件处理函数，将数字添加到密码输入框。 3. **输入验证**：实现正确的密码验证机制，这可能包括比较用户输入...
这种效果通常被称为"滚动停靠"或者"悬浮搜索框"，它允许用户在滚动页面时始终保持搜索框在屏幕的可见区域，从而提高交互性和易用性。 传统的分页方法在某些情况下可能会影响用户体验，因为用户需要不断翻页寻找内容...