Positionnement de la boîte de dialogue jQuery

Question

Je souhaite positionner ma boîte de dialogue jQuery x-pixels à partir de la bordure droite du navigateur. Est-ce que c'est possible?

http://jqueryui.com/demos/dialog/

L'option de position ne semble pas avoir ce genre de configuration, mais est-il une autre façon de le faire?

Answer 1

Si vous faites position:absolute de votre boîte de dialogue, sa prise au sujet du flux de la page régulière, et vous pouvez utiliser la propriété left et top pour le placer n'importe où sur la page.

$('.selector').dialog({ dialogClass: 'myPosition' }); 

et définir la classe myPosition css que:

.myPosition { 
    position: absolute; 
    right: 200px; /* use a length or percentage */ 
} 

Vous pouvez régler le top, left, right et bottomproperties pour myPosition en utilisant soit une longueur telle que, en pixels ou en pourcentage.

Answer 2

regarder ici: http://jqueryui.com/demos/dialog/#option-position

Initialiser une boîte de dialogue avec l'option de position spécifiée.

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

Récupère ou définit l'option de position, après init.

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

Answer 3

Cela permet de maintenir dialogue div en position fixe

cela fonctionne pour moi dans IE FF chrome et safari

jQuery("#dialogDiv").dialog({ 
    autoOpen: false, 
    draggable: true, 
    resizable: false, 
    height: 'auto', 
    width: 500, 
    modal: false, 
    open: function(event, ui) { 
     $(event.target).parent().css('position', 'fixed'); 
     $(event.target).parent().css('top', '5px'); 
     $(event.target).parent().css('left', '10px'); 
    } 

}); 

lorsque vous voulez boîte de dialogue ouverte simplement appeler

$('#dialogDiv').dialog('open'); 

Answer 4

Cela a fonctionné pour moi pour afficher le dialogue dans le coin supérieur droit avec décalage 10px: position: "right-10 top+10":

$("#my-dialog").dialog({ 
    resizable: false, 
    height:"auto", 
    width:350, 
    autoOpen: false, 
    position: "right-10 top+10" 
}); 

Answer 5

Pour fixer la position centrale, j'utilise:

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 6

Je comprends la réponse est déjà acceptée, mais juste au cas où, si quelqu'un a besoin de plus d'informations: http://salman-w.blogspot.co.uk/2013/05/jquery-ui-dialog-examples.html

$(function() { 
      $("#dialog").dialog({ 
       position: { 
        my: "right bottom", 
        at: "right bottom", 
        of: window 
       } 
      }); 
     }); 

Answer 7

La plupart de ces réponses semblait être des solutions de rechange pour moi, et je voulais trouver le moyen officiel de le faire. Après avoir lu les documents .position(), je trouve qu'il peut en effet être fait dans l'initialisation du widget jQuery:

$("#dialog").dialog({ 
    title:title, 
    position:{my:"right top",at:"right+100 top+100", of:"body"}, 
    width:width, 
    height:height 
}) 

Lorsque le +100 est la distance de la droite et de haut respectivement

Answer 8

avec ce code vous pouvez spécifier vos positions en haut et à gauche:

$('#select_bezeh_window').dialog({ 
    modal:true, 
    resizable:false, 
     draggable:false, 
     width:40+'%', 
     height:500 , 
     position:{ 
      using: function(pos) { 
       $(this).css("top", 10+'px'); 
       $(this).css("left", 32+'%'); 
      } 
     } 
});