Я использую jquery blockui, но div, который покрыт, очень длинный, поэтому сообщение загрузки появляется на экране.Есть ли в любом случае, чтобы jquery BlockUI вертикально центрировался на экране
Есть ли в любом случае, чтобы сообщение jquery blockui загружалось вертикально на видимый экран, чтобы люди могли видеть сообщение без прокрутки вниз?
blockUI по умолчанию отображает в центре экрана. И я считаю, что он отображается в центре, даже когда вы продолжаете прокручивать страницу.
Однако вы можете установить следующие свойства при вызове blockUI.
centerX: true
centerY: true
Адрес definite answer.
Создать эту функцию:
$.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;
}
После вызова blockUI, центр диалогового окна, как это:
$('.blockUI.blockMsg').center();
thx mate, именно то, что я искал – kabstergo
Это центрирование сообщения даже при изменении размеров окна:
$.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 не будут работать, если вы блокировка всей страницы, блокировка только эффекта.
Я пишу плагин для этого плагина jquery. Ну еще больше, чтобы совершенствоваться.
Обратите внимание, как получить центр высоты.
/**
* added by lijg.
* refer: http://forum.jquery.com/topic/blockui-centering-the-dialog-window
*/
(function(){
function cp_props(inSrcObj, inDestObj, inOverride) {
if (inDestObj == null) {
return inSrcObj;
}
var prop;
for (prop in inSrcObj) {
if (inOverride || !inDestObj[prop]) {//先判断是否可以重写，true则不必在计算后面的值，false在计算后面时候存在这个属性。
inDestObj[prop] = inSrcObj[prop];
}
}
return inDestObj;
}
function _debug_info(container, aim){
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());
}
function center_of_dom(container, aim){
//_debug_info(container, aim);
container.css("position", "absolute");
container.css("width", aim.width() + "px");
container.css("height", aim.height() + "px");
container.css("top", ($(window).height() - container.height())/2 + $(window).scrollTop() + "px");
container.css("left", ($(window).width() - container.width())/2 + $(window).scrollLeft() + "px");
}
function center_of_x(container, aim){
//_debug_info(container, aim);
container.css("position", "absolute");
container.css("width", aim.width() + "px");
container.css("left", ($(window).width() - container.width())/2 + $(window).scrollLeft() + "px");
}
function center_of_y(container, aim){
//_debug_info(container, aim);
container.css("position", "absolute");
container.css("height", aim.height() + "px");
container.css("top", ($(window).height() - container.height())/2 + $(window).scrollTop() + "px");
}
$._blockUI = $.blockUI;
$.blockUI = function(opts){
if(! opts.onOverlayClick){
opts.onOverlayClick = $.unblockUI;
}
$._blockUI(opts);//call blockUI
var container = $('.blockUI.blockMsg');
var aim = opts.message;
if(opts.auto_center){
center_of_dom(container, aim);//center it
//center when resize
$(window).resize(function() {
center_of_dom(container, aim);
});
}else if(opts.auto_center_x){
center_of_x(container, aim);//center it
//center when resize
$(window).resize(function() {
center_of_x(container, aim);
});
}else if(opts.auto_center_y){
center_of_y(container, aim);//center it
//center when resize
$(window).resize(function() {
center_of_y(container, aim);
});
}
};
cp_props($._blockUI, $.blockUI, true);//cp properties
//other methods
$.blockUI.center_of_dom = center_of_dom;
})();
Я использую css для центра блокаUI. Это работает как по горизонтали, так и по вертикали.
Примечание: вы можете удалить стиль по умолчанию из 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 */
}Легко по центру экрана:
$.blockUI({
message: myMessage,
centerY: false,
centerX: false,
css:{
position: 'fixed',
margin: 'auto'
}
});
Но вам действительно нужно, чтобы покрыть 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 скрипку демонстрационный пример, который продемонстрирует оба варианта here
Я не думаю, что вы правы. Кажется, он отображается в центре заблокированного содержимого (не в центре экрана) - поэтому, если секция блокировки больше экрана, появится сообщение загрузки ниже экрана. – leora
. Вы должны звонить, вызывая конкретный раздел, поэтому он просто блокирует этот раздел. – ShankarSangoli
Я звоню blockui над div. что div имеет контент, который очень длинный, но я хочу, чтобы сообщение загрузки просто отображалось в центре видимого экрана. – leora