Como posso posicionar o meu diálogo jQuery para o centro?

Question

Eu tentei seguinte código, mas só posições diálogos deixou posição canto superior para o centro, e que faz elemento a ser alinhado à direita. Como posso diálogo centro a centro real, que elementos contagens de largura, de modo que a linha central vai cortar diálogo para 50% 50% halfs?

$('.selector').dialog({ position: 'center' });

http://docs.jquery.com/UI/Dialog#option-position

Answer 1

Eu tenho certeza que você deve não precisa definir uma posição:

$("#dialog").dialog();

deve centrar por padrão.

Eu tinha um olhar para o artigo, e também verificado o que diz sobre o jquery oficial local -ui sobre o posicionamento de um diálogo : e nele foram discutidos 2 estados de:. Inicializar e depois Inicializar

Exemplos de código - (retiradas de jQuery UI 2009-12-03)

Inicializar uma janela com a opção posição especificada.

$('.selector').dialog({ position: 'top' });

obter ou definir a opção posição, depois de inicialização.

//getter
var position = $('.selector').dialog('option', 'position');
//setter
$('.selector').dialog('option', 'position', 'top');

Eu acho que se você fosse para remover o atributo posição que você iria encontrá-lo Centros pela própria pessoa tentar a segunda opção setter onde você define 3 elementos de "opção" "posição" e "centro".

Answer 2

O mais recente jQuery UI tem um componente de posição:

$("#myDialog").position({
   my: "center",
   at: "center",
   of: window
});

Doc: http://jqueryui.com/demos/position/
Get: http://jqueryui.com/download

Answer 3

Devido a necessidade de diálogo uma posição, você precisa incluir a posição js

<script src="jquery.ui.position.js"></script>

Answer 4

Então, se alguém bate esta página como eu fiz, ou para quando eu me esquecer em 15 minutos, eu estou usando diálogo jqueryui versão 1.10.1 e jQuery 1.9.1 com o IE8 em um iframe (blah), e ele precisa de um dentro especificado ou se ele não funcionar, ou seja

position: {
 my: "center bottom",
 at: "center top",
 of: $("#submitbutton"),
 within: $(".content")
}

Graças ao @ vm370 para me apontar na direção certa.

Answer 5

open: function () {

    var win = $(window);

    $(this).parent().css({
        position: 'absolute',
        left: (win.width() - $(this).parent().outerWidth()) / 2,
        top: (win.height() - $(this).parent().outerHeight()) / 2
    });
}

Answer 6

Para posição central correção, eu uso:

open : function() {
    var t = $(this).parent(), w = window;
    t.offset({
        top: (w.height() / 2) - (t.height() / 2),
        left: (w.width() / 2) - (t.width() / 2)
    });
}

Answer 7

Tente este ....

$(window).resize(function() {
    $("#dialog").dialog("option", "position", "center");
});

Answer 8

Estou ficando melhores resultados para colocar diálogo jQuery no centro da janela do navegador com:

position: { my: "center bottom", at: "center center", of: window },

Há provavelmente forma mais precisa para posicioná-lo com a opção " usando ", conforme descrito na documentação em http://api.jqueryui.com/position/ mas eu estou com pressa ...

Answer 9

Eu tenho que chamar a função dialog() duas vezes para posicionar a caixa de diálogo (jQuery v1.11.2 / jQueryUI v1.10.4).

$("#myDialog").dialog({
    /* initial dialog parameters */
}).dialog({
    position: {
        my: "center center",
        at: "center center",
        of: window
    }
});

Answer 10

A seguir parâmetro posição funcionou para mim

position: { my: "right bottom", at: "center center", of: window },

Boa sorte!

Answer 11

Jquery UI 1.9.2, jQuery e as versões posteriores don' apoio IE8

Eu encontrei duas soluções para isso.

1. Reversão para jquery UI 1.7.2 para apoiar IE8,

2. Tente este código com Jquery UI 1.9.2

position: {my: "center",  at: "center", of: $("body"),within: $("body") }

Answer 12

De acordo com a discussão a seguir, o problema pode ser devido a uma menor compatibilidade IE nas versões mais recentes do jQuery, voltando ao 1.7.2 parece resolver o problema, o que só ocorre no IE8. http://forum.jquery.com / topic / jquery-ui-dialog-posicionamento-não-trabalho-em-ie-8

Answer 13

Outra coisa que pode dar-lhe o inferno com posicionamento JQuery diálogo, especialmente para documentos maiores do que a porta visualização do browser - você deve adicionar a declaração

<!DOCTYPE html>

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 14

Se você estiver usando arquivos jquery individuais ou um jquery personalizada de download de qualquer forma certifique-se de também têm jquery.ui.position.js adicionados à sua página.

Answer 15

Você está executando a este em apenas IE? Se assim for, tente adicionar isso para a primeira linha de tag cabeça de sua página:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Eu tive que embora todos os problemas de compatibilidade foram fixados em jQueries posteriores, mas eu corri para este hoje.

Answer 16

Tente isto para versões mais antigas e alguém que não querem posição de uso:

$("#dialog-div-id").dialog({position: ['center', 'top'],....

Answer 17

Você também precisa fazer manual de re-centralização se estiver usando jQuery UI em dispositivos móveis - o diálogo é posicionada manualmente através de um '& superior esquerdo' propriedade css. se o utilizador muda a orientação, o posicionamento não é mais centrada, e deve ser adaptado / re-centrado em seguida.

Answer 18

Para o ambiente Win7 / IE9 apenas definir no seu arquivo css:

.ui-dialog {
   top: 100px;
   left: 350px !important;
}

Answer 19

Eu tive um problema com isso e eu finalmente descobri isso. Até hoje eu estava usando uma versão muito antiga do jQuery, versão 1.8.2.

Em todos os lugares onde eu tinha dialog usada eu tinha iniciado com a seguinte opção de posição:

$.dialog({
    position: "center"
});

No entanto, descobri que a remoção position: "center" ou substituí-lo com a sintaxe correta não fazer o truque, por exemplo:

$.dialog({
    position: {
       my: "center",
       at: "center",
       of: window
    }
});

Embora o acima é correta, eu também estava usando option para definir a posição como o centro quando eu carregar a página, à maneira antiga, assim:

// The wrong old way of keeping a dialog centered
passwordDialogInstance.dialog("option", "position", "center");

Este estava causando todas as minhas janelas de diálogo para furar a parte superior esquerda do porto vista.

Eu tive que substituir todas as ocorrências desta com a nova sintaxe correta a seguir:

passwordDialogInstance.dialog(
    "option",
    "position", 
    { my: "center", at: "center", of: window }
);

Answer 20

Eu fixo com css:

.ui-dialog .ui-dialog-content {
  width: 975px!important;
  height: 685px!important;
  position: fixed;
  top: 5%;
  left: 50%;
  margin:0 0 0 -488px;
}

Answer 21

Não foi possível obter IE9 para centralizar a caixa de diálogo.

Fixed-lo adicionando isso ao css:

.ui-dialog {
    left:1%;
    right:1%;
}

Percent não importa. Qualquer número pequeno funcionou.