so easy 的弹出层—

　　在做网站的开发过程中，可能需要使用弹出层，使用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: {width: '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>

转载于:https://www.cnblogs.com/chenjianhong/archive/2012/09/27/4144938.html

so easy 的弹出层——使用jquery相关推荐

html 弹出层插件,jQuery弹出层插件(原创)
插件描述:简约的jQuery弹出层插件更新时间:2020-01-17 23:37:28 更新说明:版本v4.3.0 1.修复最大化可拖动.改变大小的问题 2.去除对于图片的依赖 3.更新拖动插件 4 ...
分享一个灰常简单好用的jQuery弹出层插件:jquery.artwl.thickbox.js
最终效果: 插件原理所有弹出层的原理都差不多,就是用一个全屏半透明DIV做遮罩层,在这个遮罩层上再显示出一个层放要显示的内容,其他的就是CSS的运用了. 本插件为了使用简单,把JS跟CSS封装在了一 ...
锁定弹出层（jquery语法）
经常遇到要弹出一个悬浮层,鼠标的事件只能在本层上有效,底层会失效.能用的做法是在悬浮层和底层之间在加一个遮盖层,遮盖住整个浏览器,这样就不能点击底层的任何东西了. 遮盖层的定义: var w = M ...
j2ee:servlet练习鲜花项目(购物车、分页、ajax、iframe弹出层、jquery、json(计算小计、总计)、map集合高级遍历、图片上传)...
第一:概念购物车全过程的理解: 1.新建一个购物车类,这样,这个类里面就可以封装商品对象和商品数量了. 2.每种商品都是一个购物车 3.把所有的购物车放在一起,也就是放在一个map集合中,这样 ...
非常漂亮的仿腾讯弹出层效果
2019独角兽企业重金招聘Python工程师标准>>> 非常漂亮的仿腾讯弹出层效果 http://www.jscode.cn/js/v45300 jquery弹出层插件-jquery ...
layUI弹出层组件使用
首先官网下载layUI或者下载layer.js组件也可以 layer.js组件官网链接 layer 弹出层组件 - jQuery 弹出层插件 (layuiweb.com) 独立组件使用需要引入JQue ...
Vue（二十一）Layer弹出层
安装:下载源码到本地 layer: 丰富多样的 Web 弹出层组件,可轻松实现 Alert/Confirm/Prompt/普通提示/页面区块/iframe/tips 等等几乎所有的弹出交互.目前已成为 ...
Layer 弹出层组件
Layer 弹出层组件一.Layer是什么? 用于实现网页中的各种弹出层交互, 如 Alert/Confirm/Message/Tips/Page/Iframe/Loading/Prompt/Tab ...
分享123个JS特效弹出层，总有一款适合您
分享123个JS特效弹出层,总有一款适合您 123个JS特效弹出层下载链接:https://pan.baidu.com/s/1mH0heedscCrBmft_zOjjwA?pwd=n4eo 提取码: ...
自写jQuery插件，实现简单网页遮罩层/弹出层功能，兼容IE6、IE7
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u010480479/article/details/25159287 本屌丝近期工作要求重写站点全部 ...

so easy 的弹出层——使用jquery

so easy 的弹出层——使用jquery相关推荐

最新文章

热门文章