01.<html>
02. <head>
03. <meta http-equiv="Content-Type" content="text/html;charset=GBK"/>
04. <script type="text/javascript" src="./jquery-1.4.4.js"></script>
05. <style type="text/css">
06. .divv
07. {
08. position:absolute;
09. top:30%;
10. left:30%;
11. width:80px;
12. height:60px;
13. border:1px solid #666;
14. background-color:#9CF;
15. text-align:center;
16. display:none;
17. z-index:300;
18. }
19. .popup
20. {
21. border:1px solid red;
22. position:absolute;
23. top:0px;
24. left:0px;
25. width:100%;
26. height:100%;
27. background-color:#000;
28. filter:alpha(opacity=45);
29. opacity:0.45;
30. display:none;
31. z-index:200;
32. }
33. .fff
34. {
35. border:1px solid blue;
36. position:relative;
37. background-color:#000;
38. }
39. </style>
40. <script type="text/javascript">
41. $(document).ready(
42. function(){
43.
44. //页面初始化
45. goCenter();
46.
47. //滚动条滚动
48. $(window).scroll(
49. function(){
50. goCenter();
51. }
52. );
53.
54. //拖动浏览器窗口
55. $(window).resize(
56. function(){
57. goCenter();
58. }
59. );
60.
61. //锁屏
62. $("#lockButton").click(
63. function(){
64. $("#popupDiv").show();
65. $("#alertDiv").show();
66. }
67. );
68.
69. //解屏
70. $("#unlockButton").click(
71. function(){
72. $("#popupDiv").hide();
73. $("#alertDiv").hide();
74. }
75. );
76. }
77. );
78.
79. function goCenter()
80. {
81. var h = $(window).height();
82. var w = $(window).width();
83. var st = $(window).scrollTop();
84. var sl = $(window).scrollLeft();
85.
86. $("#popupDiv").css("width", w+sl);
87. $("#popupDiv").css("height", h+st);
88. $(".divv").css("top", ((h-60)/2)+st);
89. $(".divv").css("left", ((w-80)/2)+sl);
}
</script>
</head>
<body bgcolor="#FFFFFF">
<select name="sdfas">
<option value="a">aaa</option>
<option value="b">bbb</option>
</select>
<input type="button" value="锁屏" id="lockButton"/>
<div class="popup" id="popupDiv">
<!--IE6下，DIV默认不能遮盖select标签，可在此处放置一个iframe，以达到遮盖效果，其他浏览器可以不要-->
<iframe frameborder="1" scrolling="no" height="100%" width="100%" class="fff"></iframe>
</div>
<div class="divv" id="alertDiv">
<input type="button" value="关闭" id="unlockButton"/>
</div>
</body>
</html>
分享到：
相关推荐
小巧漂亮jquery加载进度条特效，基于jquery.progressbar插件实现的进度条效果，有多种颜色可选，自带实例，和PHP结合实现，可改成ASP版，这里就不多说了，需要用的就仔细查看jquery官方文档吧。
本教程将详细讲解如何使用jQuery库来模拟页面加载进度条。 首先，jQuery是一款广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画制作以及Ajax交互。jQuery的易用性和丰富的功能使其成为创建动态网页的强大...
在本文中，我们将深入探讨如何使用jQuery实现数据加载进度条效果。这个代码示例是基于jQuery库的2.1.0版本，包含了四种不同的进度条动画特效，为用户提供了丰富的视觉体验，使得网页上的数据加载过程更加友好和吸引...
2. 提示信息：结合使用jQuery的`text()`或`html()`方法，可以在进度条旁显示具体的文字提示，如“加载中…”或“已完成XX%”。 3. 回调函数：使用`complete`或`change`事件，可以在进度条达到特定值或完成时执行特定...
"jquery动态页面加载进度条"就是一种优化用户体验的工具，它通过在页面加载过程中展示一个直观的进度条，让用户知道页面正在加载并估计加载完成的时间，从而减少用户的等待焦虑感。这个插件基于JavaScript库jQuery...
本资源"jQuery滑动加载进度条代码.zip"提供了一个实现动态进度条加载特效的代码实例，特别适用于网页加载过程中显示进度，提升用户体验。 首先，进度条在网页应用中扮演着重要角色，它可以让用户了解当前操作的进度...
"30个jQuery & CSS3加载动画和进度栏插件"集合了多种创新且高效的工具，旨在帮助开发者创建吸引人的、反馈及时的网页交互。下面我们将深入探讨这些技术及其应用。 首先，jQuery是一个强大的JavaScript库，它简化了...
"利用Ajax+Jquery实现异步进度条效果"这个主题正是围绕这一目标展开，它涉及到C#后端开发、.NET框架、Ajax技术以及Jquery库的前端应用。下面将详细阐述这些知识点。 首先，C#是一种面向对象的编程语言，广泛应用于...
"jQuery加载进度条特效代码"是利用jQuery实现的一种用户体验优化技术，主要用于显示数据加载过程，提升用户对等待时间的心理预期。这种效果常见于文件上传、大容量数据下载或者后台接口请求时，让用户感知到系统正在...
在网页设计中，进度条是一种常见的用户界面元素，用于显示任务的完成状态或者加载过程。jQuery，一个广泛使用的JavaScript库，提供了丰富的功能来简化DOM操作、事件处理和动画效果，其中包括实现进度条特效。本教程...
**jQuery页面载入进度条**是一种用户界面设计技术，它为用户提供可视化的反馈，表明网页内容正在加载。这种效果能够显著提升用户体验，因为用户在等待页面完全加载时能明确感知到进度，而不是面对一片空白。在本文中...
在本教程中，我们将探讨如何使用 jQuery 来创建一个动态进度条，这是一种常见的用户界面元素，可以用于显示加载状态、进度或评估等。 首先，我们需要引入 jQuery 库。在 `index.html` 文件中，你需要添加以下代码来...
标题中的“进度条”指的是在用户界面中显示任务或数据加载状态的一种图形元素，它通常以条形或圆形的形式呈现，随着任务的进行而逐渐填充。JQuery 是一个广泛使用的JavaScript库，它简化了HTML文档操作、事件处理、...
本文将深入探讨如何使用jQuery库创建一个动态的进度条动画，同时显示实时的百分比。 首先，jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画效果和Ajax交互。在实现进度条动画时，我们主要利用...
标题中的“jQuery CSS3进度条加载动画特效”指的是利用JavaScript库jQuery和CSS3技术来创建一种视觉效果，即在网页内容加载时显示的进度条。这种特效可以提供用户反馈，表明页面正在加载，并且增加了用户体验的互动...
jQuery百分比进度条动画加载代码是一款非常简单的网页动态进度条自定义插件，只需要引用JS就可以用，哪里需要进度条就在哪个节点添加class就可以了。 引入js文件 [removed][removed] [removed][removed]
**jQuery网页加载进度条插件** 是一个用于增强用户体验的工具，主要针对的是网页内容的异步加载过程。它利用了**pace.js** 这个库，能够实时地展示页面加载进度，给予用户一个视觉反馈，让他们知道网页正在加载且...