`

Jquery弹出层BlockUI的用法(BlockUI是个插件)

jqueryBlockUI 
阅读更多
例子一：
<head runat="server">
     <title></title>
     <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
     <script type="text/javascript" src="Scripts/jquery.blockUI.js"></script>
     <script type="text/javascript">
         $(document).ready(function () {
             $('#btnOpen').click(function () {
                 $.blockUI();
                 setTimeout($.unblockUI, 2000);
             });
         });
     </script>
</head>
<body>
     <form id="form1" runat="server">
     <div>
         <input id="btnOpen" type="button" value="Open" />
     </div>
     </form>
</body>
</html>
 
例子二：
<head runat="server">
     <title></title>
     <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
     <script type="text/javascript" src="Scripts/jquery.blockUI.js"></script>
     <script type="text/javascript">
         $(document).ready(function () {
             $('#btnOpen').click(function () {
                 $.blockUI({
                     message:"请稍候",
                     css: {
                     border: 'none',
                     padding: '15px',
                     backgroundColor: 'yellow',
                     width:"300px",
                     opacity: .5,
                     color: 'Red'
                    }
                 });
                 setTimeout($.unblockUI, 2000);
             });
         });
 
     </script>
</head>
<body>
     <form id="form1" runat="server">
     <div>
     <input id="btnOpen" type="button" value="Open" />
     </div>
     </form>
</body>
</html>
 
例子三：
<head runat="server">
     <title></title>
     <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
     <script type="text/javascript" src="Scripts/jquery.blockUI.js"></script>
     <script type="text/javascript">
         $(document).ready(function () {
             $('#btnOpen').click(function () {
                 $.blockUI({
                     message: '<image src="images/wait.gif"></image>',
                     css: {
                         border: 'none',                   // 无边界
                         width:"20px",                     // 中间框框的宽度
                         top:"50%",                        // 高居中
                         left:"50%"                        // 左居中
                    }
                 });
                 setTimeout($.unblockUI, 2000);
             });
         });
     </script>
</head>
<body>
     <form id="form1" runat="server">
     <div>
         <input id="btnOpen" type="button" value="Open"/>
     </div>
     </form>
</body>
</html>
 
例子四：
<head runat="server">
     <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
     <script type="text/javascript" src="Scripts/jquery.blockUI.js"></script>
     <script type="text/javascript">
         $(document).ready(function () {
             $('#btnOpen').click(function () {
                 $.blockUI({
                     message: $('#loginForm')
                 });
             });
             $('#btnReset').click(function () {
                 $.unblockUI();
             });
             $('#btnLogin').click(function () {
                location.href ="default.aspx";
             });
         });
     </script>
</head>
<body>
     <form id="form1" runat="server">
     <div>
         <input id="btnOpen" type="button" value="Open"/>
         <div id="loginForm" style="display:none; cursor:default">
             <table style="text-align:right">
                 <tr>
                     <td colspan="2">用户名:<input id="txtUserName" type="text" /></td>
                 </tr>
                  <tr>
                     <td colspan="2">密码:<input id="Text1" type="text" /></td>
                 </tr>
                 <tr style="text-align:center">
                     <td>
                         <asp:Button ID="btnLogin" runat="server" Text="登陆" />
                    </td>
                     <td>
                         <input id="btnReset" type="reset" value="取消登陆" />
                     </td>
                 </tr>
             </table>
         </div>
     </div>
     </form>
</body>
</html>
 
 
例子五：
            // 当有ajax请求时，当加载信息较慢时，会显示该等待图片，带来良好的用户体验
             $(document).ajaxStart(function () {
                 $.blockUI({
                     message: '<image src="images/wait.gif"></image>',
                     css: {
                         width: "20px",   // 宽度小一点
                         top: "50%",
                         left: "50%"
                     }
                 });
             });
             $(document).ajaxStop(function () {
                 // 直接调用，无延时
                 $.unblockUI();
             });
分享到：
| jQuery中ajax中事件执行顺序
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JQuery.BlockUI 弹出层

    使用jQuery.BlockUI非常简单，只需引入jQuery库和BlockUI插件的脚本文件，然后通过调用$.blockUI方法来启动弹出层。例如，可以这样创建一个简单的消息提示： ```javascript $.blockUI({ message: '请稍候...&lt;/h1&gt;...

    blockUI弹出层

    BlockUI 是一个 JavaScript 插件，它主要用于网页中的页面元素阻塞或锁定，通常用于创建弹出层或者浮动层效果。这个插件可以帮助开发者轻松地实现页面部分区域的加载动画，提示用户页面正在处理数据，避免用户在数据...

    Jquery 等待弹出框插件jquery.blockUI（遮罩蒙板）

    jQuery BlockUI 插件就是这样一个工具，它能轻松实现页面的“锁定”效果，创建出类似于弹出框的遮罩层，为用户提供直观的反馈。 **一、BlockUI 插件安装与引入** 首先，你需要在项目中引入 jQuery 和 BlockUI 插件...

    jquery.blockui遮罩插件

    通过自定义`message`参数，你可以使用Bootstrap的弹出框或者进度条来显示加载状态。 **总结** jQuery BlockUI 是一个强大的前端开发工具，它为开发者提供了便捷的页面锁定和解锁功能，确保在执行关键操作时用户...

    基于jquery的BlockUI做的遮罩层

    在网页开发中，有时我们需要创建一个遮罩层或者弹出框来提示用户或者阻止用户与页面其他部分的交互，这就是“基于jQuery的BlockUI”插件所做的事情。BlockUI是一款非常实用的jQuery插件，它能够方便地实现页面区域的...

    11个jquery弹出层插件总会有你喜欢的和适合你的

    在标题和描述中提到的“11个jQuery弹出层插件”，我们将探讨这些插件的特点、应用场景以及如何使用它们。 1. **jQuery UI Dialog** jQuery UI 提供了一个高度可定制的Dialog组件，可以用来创建模态或非模态对话框...

    jquery插件弹出div

    总结起来，"jquery插件弹出div"是一个利用jQuery库实现的交互功能，它通过"blockUI"这样的插件提供了弹出式对话框或者模态框，增强了用户的交互体验。理解并掌握这类插件的使用，对于提升网页应用的用户体验和开发...

    基于jquery的blockui插件显示弹出层

    总的来说，jQuery BlockUI插件提供了一种灵活且易于使用的机制，可以在网页中实现丰富的弹出层功能。通过调整配置参数，你可以轻松定制弹出层的外观和行为，满足各种交互设计需求。无论是在处理异步请求、显示提示...

    jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】

    总的来说，使用jQuery和blockUI插件实现一个带遮罩层效果的弹出层是一项非常实用的技术，它可以帮助开发者提升用户的操作体验，尤其是在需要进行长时间操作或等待响应时。通过上述方法，开发者可以轻松地将这类交互...

    blickui-弹出层插件

    在实际应用中，"blickui-弹出层插件"的使用方法可能包括以下步骤：引入jQuery和插件的JavaScript及CSS文件，通过jQuery选择器找到要添加弹出层的元素，然后调用插件提供的方法来设置和控制弹出层的显示、隐藏、动画...

    jquery.blockUI完整事例

    在上面的例子中，当用户点击ID为`myButton`的按钮时，会弹出一个显示“请稍后”的遮罩层，阻止用户对页面的其他操作。 三、高级配置 jQuery.blockUI提供了丰富的配置选项，允许开发者自定义遮罩层的样式、动画效果...

    jQuery BlockUI 插件（遮罩层）

    在描述中提到的链接是CSDN博主evangel_z的一篇博客文章，详细介绍了如何使用jQuery BlockUI插件。通过这篇文章，我们可以了解到该插件的基本用法和一些高级特性。 首先，要使用jQuery BlockUI，你需要在页面中引入...

    jquery遮罩

    除了BlockUI，还有其他jQuery遮罩插件可供选择，如`jQuery Masked Input Plugin`，主要用于输入框的格式化，不适用于全局遮罩，或者`jQuery UI Dialog`，可以创建弹出对话框并带有遮罩效果。 ### 七、总结 jQuery...

    弹出层之1：JQuery.Boxy (一) 使用介绍

    JQuery是一款基于JQuery的弹出层插件，它不仅可以为网页设计提供美观的弹出层效果，还可以支持iframe和模式窗口，这意味着开发者可以利用它来创建模态对话框、信息提示框等多种交互界面。尽管它的功能比较丰富，但它...

    Block.UI示例

    接下来，你可以使用 jQuery 选择器结合 BlockUI 的方法来调用插件。以下是一些基本的调用示例： 1. 锁定整个页面： ```javascript $.blockUI({ message: '请稍等，正在加载数据...', overlayCSS: { ...

    页面遮罩四种方式.rar

    2. 引导用户注意力：在弹出对话框或执行关键操作时，遮罩层可以防止用户误触背景内容。 3. 创建模态效果：遮罩层配合弹窗使用，形成模态对话框，使用户必须处理当前窗口后再继续操作。 接下来，我们逐一解析这四种...

Magicbox
Global site tag (gtag.js) - Google Analytics