caixa de jQuery UI diálogo não posicionado do centro da tela

Question

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?

Answer 1

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');

Answer 2

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.

Answer 3

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');
}

Answer 4

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.

Answer 5

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.

Answer 6

Basta adicionar abaixo da linha de CSS na mesma página.

.ui-dialog 
{
position:fixed;
}

Answer 7

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.

Answer 8

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
})

Answer 9

Para mim jquery.dimensions.js foi o culpado

Answer 10

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.

Answer 11

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.

Answer 12

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.

Answer 13

Apenas resolvido o mesmo problema, o problema era que eu não importou alguns arquivos js, como widget.js:)

Answer 14

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();
                          }
                      });
                  });

Answer 15

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.

Answer 16

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.

Answer 17

para posicionar o diálogo no centro da tela:

$('#my-selector').parent().position({
                    my: "center",
                    at: "center",
                    of: window
});

Answer 18

Eu tive o mesmo problema, que foi fixado quando entrei uma altura para o diálogo:

$("#dialog").dialog({
    height: 500,
    width: 800
});

Answer 19

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.

Answer 20

$("#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