我正在使用jquery blockui，但被覆盖的 div 很长，因此加载消息显示在屏幕外。
无论如何让jquery blockui在可见屏幕上垂直加载消息，这样人们就可以在不向下滚动的情况下看到消息？
问问题
14019 次
7 回答
10
这是肯定的答案。
创建这个函数：
$.fn.center = 函数 () {
this.css("位置","绝对");
this.css("top", ($(window).height() - this.height()) / 2+$(window).scrollTop() + "px");
this.css("left", ($(window).width() - this.width()) / 2+$(window).scrollLeft() + "px");
返回这个；
}
调用 blockUI 后，将对话窗口居中，如下所示：
$('.blockUI.blockMsg').center();
于 2012-12-03T17:46:10.080 回答
6
在屏幕中轻松居中：
$.blockUI({
message: myMessage,
centerY: false,
centerX: false,
css:{
position: 'fixed',
margin: 'auto'
}
});
于 2015-11-19T21:26:15.313 回答
1
blockUI默认显示在屏幕中央。而且我相信即使您继续滚动页面，它也会显示在中心。
但是，您可以在调用时设置以下属性blockUI。
centerX: true
centerY: true
于 2012-02-05T02:57:10.580 回答
1
我使用 css 使 blockUI 居中。这适用于水平和垂直。
注意：您可能希望使用此方法从 blockUI 中删除默认样式$.blockUI.defaults.css = {};
希望这会有所帮助。
.blockUI
{
position: fixed;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
}于 2014-12-17T00:54:59.833 回答
1
但是你真的需要覆盖 div 吗？也许阻止整个页面是更好的选择？
这是两种不同的方法：
1) 屏蔽整个页面
在这种情况下，您不需要任何附加功能，并且消息始终位于中心。
$.blockUI({});
2) 阻止特定的 HTML 元素
但是如果这个元素的尺寸很长，你必须做一些额外的工作。首先声明方法
$.fn.center = function () {
this.css("position","absolute");
this.css("top", ($(window).height() - this.height()) / 2+$(window).scrollTop() + "px");
this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
return this;
}
进而
$('.very-long-container').block({});
$('.blockUI.blockMsg').center();
在这里演示这两个选项的 JS Fiddle 演示示例
于 2015-12-10T22:20:34.290 回答
0
即使您调整窗口大小，这也会使消息居中：
$.blockUI({
css: {
width: message_width + "px",
height: message_height + "px",
top: '50%',
left: '50%',
margin: (-message_height / 2) + 'px 0 0 '+ (-message_width/2) + 'px'
},
message: messageText
});
无论如何，当您阻塞整个页面centerX时centerY将不起作用，只会影响元素阻塞。
于 2012-12-23T17:10:52.013 回答
-1
我为这个 jquery 插件写了一个插件。更完美。
请注意如何获得高度中心。
/**
* 由 lijg 添加。
* 参考：http://forum.jquery.com/topic/blockui-centering-the-dialog-window
*/
（功能（）{
函数cp_props（inSrcObj，inDestObj，inOverride）{
如果（inDestObj == null）{
返回 inSrcObj;
}
变种道具；
for（inSrcObj 中的道具）{
if in || !inObj[prop] {/ 属性判断是否可以计算出最合适的值，true 那么这个必然在计算后面，false 在计算后面的时候存在。
inDestObj[prop] = inSrcObj[prop];
}
}
返回 inDestObj;
}
功能_debug_info（容器，目标）{
console.info("$(window).height():" + $(window).height() + ", $(window).width():" + $(window).width());
console.info("$(window).scrollTop():" + $(window).scrollTop() + ", $(window).scrollLeft():" + $(window).scrollLeft());
console.info("container.height():" + container.height() + ", container.width():" + container.width());
}
功能 center_of_dom（容器，目标）{
//_debug_info(容器，目标);
container.css("位置", "绝对");
container.css("宽度", 目标宽度() + "px");
container.css("高度", 目标高度() + "px");
container.css("top", ($(window).height() - container.height()) / 2 + $(window).scrollTop() + "px");
container.css("left", ($(window).width() - container.width()) / 2 + $(window).scrollLeft() + "px");
}
功能 center_of_x（容器，目标）{
//_debug_info(容器，目标);
container.css("位置", "绝对");
container.css("宽度", 目标宽度() + "px");
container.css("left", ($(window).width() - container.width()) / 2 + $(window).scrollLeft() + "px");
}
功能 center_of_y（容器，目标）{
//_debug_info(容器，目标);
container.css("位置", "绝对");
container.css("高度", 目标高度() + "px");
container.css("top", ($(window).height() - container.height()) / 2 + $(window).scrollTop() + "px");
}
$._blockUI = $.blockUI;
$.blockUI = 功能（选择）{
if(!opts.onOverlayClick){
opts.onOverlayClick = $.unblockUI;
}
$._blockUI(opts);//调用blockUI
var 容器 = $('.blockUI.blockMsg');
var 目标 = opts.message;
如果（opts.auto_center）{
center_of_dom(container, aim);//居中
//调整大小时居中
$(窗口).resize(函数() {
center_of_dom（容器，目标）；
});
}否则如果（opts.auto_center_x）{
center_of_x(容器, 目标);//居中
//调整大小时居中
$(窗口).resize(函数() {
center_of_x（容器，目标）；
});
}否则如果（opts.auto_center_y）{
center_of_y(容器, 目标);//居中
//调整大小时居中
$(窗口).resize(函数() {
center_of_y（容器，目标）；
});
}
};
cp_props($._blockUI, $.blockUI, true);//cp属性
//其他方法
$.blockUI.center_of_dom = center_of_dom;
})();
于 2013-10-29T14:19:36.797 回答