caixa de jQuery UI diálogo não posicionado do centro da tela
Pergunta
Eu tenho uma caixa de diálogo jQuery que se destina a posição no meio da tela. No entanto, parece um pouco fora do centro verticalmente.
Aqui está o código:
$('#add_box').dialog({
autoOpen: true,
width: 300,
modal: true,
resizable: false,
bgiframe:true
});
Todas as ideias por que isso não vai centro?
Solução
Se o seu visor fica rolada após as exibições de diálogo, que deixará de ser centrado. É possível involuntariamente causa do visor para rolar por adicionar / remover conteúdo da página. Você pode recentrar a janela de diálogo durante eventos de rolagem / redimensionamento chamando:
$('my-selector').dialog('option', 'position', 'center');
Outras dicas
Você está adicionando jquery.ui.position.js para sua página? Eu tive o mesmo problema, verificado o código fonte aqui e percebi que não fez acrescentar que js à minha página, depois disso .. Caixa de diálogo magicamente centrado.
Desenterrar uma sepultura velha aqui, mas para os novos usuários do Google.
Você pode manter a posição da janela do modelo quando os usuários pergaminhos adicionando este evento ao diálogo. Isso vai mudá-lo de posição absoluta para fixo. Não há necessidade de monitorar a rolagem eventos.
open: function(event, ui) {
$(this).parent().css('position', 'fixed');
}
Eu estava tendo o mesmo problema. Ele acabou sendo o jquery.dimensions.js plugin. Se eu o retirei, tudo funcionou bem. Eu incluí-lo por causa de um outro plugin que requer-se, no entanto eu descobri a partir do link aqui que as dimensões foi incluído no núcleo jQuery muito tempo atrás ( http://api.jquery.com/category/dimensions ). Você deve estar ok simplesmente livrar-se das dimensões plugin.
1). Os centros de diálogo jQuery em qualquer elemento que você colocá-lo.
Sem mais informações, meu palpite é que você tem um div corpo com uma margem ou algo parecido. Mova o div pop-up ao nível do corpo, e você vai ser bom para ir.
2.) Se você adicionar dinamicamente o conteúdo da div como você carregá-lo, centrando não será correto. Não exibir a div até que você tenha os dados sua'e colocando nele.
Basta adicionar abaixo da linha de CSS na mesma página.
.ui-dialog
{
position:fixed;
}
Para corrigir esse problema tenho a certeza que a minha altura corpo foi definido como 100%.
body { height:100% }
Isso também mantém a posição central, enquanto o usuário rola.
Adicione isto a sua declaração de diálogo
my: "center",
at: "center",
of: window
Exemplo:
$("#dialog").dialog({
autoOpen: false,
height: "auto",
width: "auto",
modal: true,
my: "center",
at: "center",
of: window
})
Para mim jquery.dimensions.js foi o culpado
Esta questão é muitas vezes relacionada com a abertura do diálogo através de uma marca de âncora (<a href='#' id='openButton'>Open</a>
) e não impedir o comportamento do navegador padrão no manipulador por exemplo.
$('#openButton').click(function(event) {
event.preventDefault();
//open dialog code...
});
Isso geralmente elimina a necessidade de qualquer posicionamento / rolagem plugins.
Eu estava enfrentando o mesmo problema de ter de diálogo não abertura centrada e rolagem minha página para o topo. A tag que eu estou usando para abrir o diálogo é uma marca de âncora:
<a href="#">View More</a>
O símbolo de libra estava causando o problema para mim. Tudo o que fiz foi modificar a href na âncora assim:
<a href="javascript:{}">View More</a>
Agora, a minha página está feliz e centrando as caixas de diálogo.
Meu Cenário: eu tive que rolar para baixo na página de diálogo aberto em um clique de botão, devido à janela de rolagem de diálogo não estava abrindo verticalmente centro para a janela, que estava saindo de vista-port .
As Ken foi mencionado acima, depois de ter definido o seu conteúdo modal executar abaixo comunicado.
$("selector").dialog('option', 'position', 'center');
Se o conteúdo é pré-carregado antes modal abre basta executar isso em evento aberto, outra manipular o DOM no evento aberto e, em seguida, executar comunicado.
$( ".selector" ).dialog({
open: function( event, ui ) {
//Do DOM manipulation if needed before executing below statement
$(this).dialog('option', 'position', 'center');
}
});
Isso funcionou bem para mim e a melhor coisa é que você não incluir qualquer outro plugin ou biblioteca para que ele funcione.
Apenas resolvido o mesmo problema, o problema era que eu não importou alguns arquivos js, como widget.js:)
Nenhuma das soluções acima parecia funcionar para mim desde que meu código está gerando dinamicamente dois divs containting e dentro de que uma imagem em cache-un. Minha solução foi a seguinte:
Por favor, note a chamada 'carga' sobre img, eo parâmetro 'close' na chamada diálogo.
var div = jQuery('<div></div>') .attr({id: 'previewImage'}) .appendTo('body') .hide(); var div2 = jQuery('<div></div>') .css({ maxWidth: parseInt(jQuery(window).width() *.80) + 'px' , maxHeight: parseInt(jQuery(window).height() *.80) + 'px' , overflow: 'auto' }) .appendTo(div); var img = jQuery('<img>') .attr({'src': url}) .appendTo(div2) .load(function() { div.dialog({ 'modal': true , 'width': 'auto' , close: function() { div.remove(); } }); });
Eu tive que adicioná-lo ao topo do meu arquivo HTML: <!doctype html>
. Eu não tinha necessidade de definir a propriedade position
. Isso é com jQuery 3.2.1. Em 1.7.1, que não foi necessário.
Isto é como eu resolver o problema, eu adicionei esta função aberta do diálogo:
open: function () {
$('.ui-dialog').css("top","0px");
}
Este agora abre a janela no topo da tela, não importa onde a página é rolada para e em todos os navegadores.
para posicionar o diálogo no centro da tela:
$('#my-selector').parent().position({
my: "center",
at: "center",
of: window
});
Eu tive o mesmo problema, que foi fixado quando entrei uma altura para o diálogo:
$("#dialog").dialog({
height: 500,
width: 800
});
Você deve adicionar a declaração
No topo do documento.
Sem ele, jquery tende a colocar a caixa de diálogo na parte inferior da página e erros podem ocorrer quando se tenta arrastá-lo.
$("#dialog").dialog({
autoOpen: false,
height: "auto",
width: "auto",
modal: true,
my: "center",
at: "center",
of: window
})
Esta solução não funciona, mas só por causa das versões mais recentes do jQuery ignorando isso completamente e volta para o padrão, que é exatamente esta queda. Então você pode simplesmente remover posição:. 'Centro' de suas opções se você quiser apenas o pop-up para ser centrado