zoukankan      html  css  js  c++  java
  • 使用jquery的blockui插件显示弹出层

      在做网站的开发过程中,可能需要使用弹出层,使用jquery的blockui插件可以很轻松的实现这个效果。blockui可以在你发送ajax请求的时候,显示一个遮罩层禁止用户对页面进行操作并显示提示信息;或者用来显示一个登陆窗口,也可用来显示图片等。

      blockui插件主要使用blockUI和unblockUI两个方法来控制弹出层的显示或者隐藏,可以在blockUI方法中指定一些参数,来控制弹出层显示的内容,大小,位置等。blockUI方法的常用的参数有:message,css,overlayCSS,showOverlay。

      message:主要用来设置要显示的内容,可以直接设置为一段文字,html代码或者使用jquery获取页面上隐藏的div。

      css:主要用来设置弹出层的样式,包括弹出层的位置,大小,边框等。

      overlayCSS:主要用来设置遮罩层的样式,包括背景色,透明度等。

      showOverlay:主要用来设置是否显示遮罩层,如果要隐藏遮罩层可以设置为false。

      下面通过一些例子来看看具体的用法,在页面导入jquery.min.js和jquery.blockui.js文件,具体实现代码如下:

    $("#btnSubmit").click(function () {
    $.blockUI({
    message: $(
    "#loginForm"),
    css: {
    '300px',
    height:
    '300px',
    left: ($(window).width()
    - 300) / 2 + 'px',
    top: ($(window).height()
    - 300) / 2 + 'px',
    border:
    'none'
    }
    });
    });
    $(
    "#btnLogin").click(function () {
    $.blockUI({
    message:
    "<h2>正在登录,请稍候……</h2>",
    css: {
    border:
    '1px solid black'
    }
    });
    setTimeout(function () { $.unblockUI() },
    1000);
    });
    $(
    "#btnCancel").click(function () {
    $.unblockUI();
    });
    对应的html代码为:
    <div id="loginForm" style="display:none">
    <table>
    <tr>
    <td>用户名:</td>
    <td><input id="txtUserName" type="text" /></td>
    </tr>
    <tr>
    <td>密 码:</td>
    <td><input id="txtPwd" type="text" /></td>
    </tr>
    <tr>
    <td><input id="btnLogin" type="button" value="登录" /></td>
    <td><input id="btnCancel" type="button" value="取消" /></td>
    </tr>
    </table>
    </div>
  • 相关阅读:
    根据会员权限显示指定字段教程与源码
    关键字替换排除HTML标签属性字符
    C# 图片处理(压缩、剪裁,转换,优化)
    点击按钮后表单自动提交的问题
    浏览器中添加收藏当前网页
    Javascript基础知识整理
    JS中不同类型的值比较问题
    ACM训练场
    sencha/extjs 动态创建grid表格
    sencha 报错问题汇总
  • 原文地址:https://www.cnblogs.com/hnsdwhl/p/2016194.html
Copyright © 2011-2022 走看看