jQuery blockUI

最新推荐文章于 2018-07-06 11:32:32 发布

bennman

最新推荐文章于 2018-07-06 11:32:32 发布

阅读量4.4k

点赞数

分类专栏： jQuery Js 文章标签： jquery function button css xhtml input

本文链接：https://blog.csdn.net/bennman/article/details/5486172

版权

jQuery Js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

官方：

http://www.malsup.com/jquery/block/#overview

需要两JS：jquery和jquery.blockUI 可下载到本地，也可直接用官方地址

blockUI CSS可直接在其JS文件修改也可在$.blockUI();里修改

导入JS时一定要先将jquery.min.js写在jquery.blockUI.js前面否则执行不了！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery blockUI</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js " ></script> <script type="text/javascript" src="http://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.31"></script> <script type="text/javascript"></script> </head> <body> <input type="button" value="click me" id="clickme" /> <div style="width:500px; height:200px; background-color:#090; display:none;" id="showme"> <input type="button" value="close" id="closeme" style="margin:50px auto; display:block"/> </div> </body> </html>

jquery.blockUI弹出框的默认宽度是500px 为了保证你自定义宽高的弹出页在所有浏览器都居中

所以要设置：（div 宽600 高200时）

    $.blockUI(
                {message:$('#showme'),
                  css: {
                  top: ($(window).height() - 200) /2 + 'px',
                 left: ($(window).width() - 600) /2 + 'px',
                 width: '600px'
                   }
               });

网页调用函数：

//打开弹出层函数
function blockUIOpen(url,w,h){
$.blockUI({
   message:$(url),
   css:{top:($(window).height()-h)/2+'px',
   left:($(window).width()-w)/2+'px',width:w+'px'}
  });
}

//关闭弹出层函数
function blockUIClose(){
$.unblockUI({fadeOut:200});
}

bennman

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery blockUI

官方：http://www.malsup.com/jquery/block/#overview 需要两JS：jquery和jquery.blockUI 可下载到本地，也可直接用官方地址blockUI CSS可直接在其JS文件修改也可在$.blockUI();里修改导入JS时一定要先将jquery.min.js写在jquery.blockUI.js前面否则执行不了
复制链接

扫一扫