jQuery - boîte de Dialogue auto-redimensionnement sur le contenu dynamique et de maintenir la position du centre

J'ai un jQuery boîte de Dialogue et je Suis charger le contenu à l'aide d'Ajax.

La boîte de Dialogue est d'abord dans le centre de la page. Le problème , ici, est , Depuis sa un contenu dynamique, la taille des données est inconnue. Donc, Quand je reçois de grandes données, la boîte de dialogue se développe uniquement dans le bas côté, c'est à dire La boîte de dialogue se développe dans le bas et le haut est toujours dans la même position.

Ce que je veux, c'est

Lors du chargement des données, la boîte de dialogue devrait s'élargir dans les deux sens (haut et bas ), de sorte que le contenu est visible sans défilement.

Essayez d'appeler "$( "#dialog" ).dialog({});" après chaque mise à jour ajax?
Si vous avez trouvé ma réponse bon, svp considérez comme "accepté". Qui va le rendre plus visible pour les futurs visiteurs. Merci!
La question a déjà une réponse marquée
N'est pas possible de décocher la accepté de répondre et sélectionnez un nouveau? Quant à moi, je suis en mesure de le faire dans la question que j'ai demandé près de deux ans.

OriginalL'auteur madhairsilence | 2012-06-27

11

Aucune des réponses que j'ai trouvé sur internet satisfait de moi pendant que j'étais en train de regarder la solution. Même celui-ci ne fonctionne pas. Après la lecture de beaucoup plus sur la documentation de l'API de JQuery, J'ai trouvé quelque chose de vraiment intéressant. Comme cette page web de décrire, vous pouvez lier un événement dans lequel il sera exécuté après la requête ajax a fait son travail. Chose est, il n'est pas si simple que cela; Comme je l'ai été faire mes propres tests à l'aide de l'exemple fourni dans la documentation de l'API, je ne pouvais pas me rendre au travail. Il semble que ma JQuery dialogue n'existe pas dans un "futur" contexte manière.

Cela m'a conduit à cette page dont la description est:
Associer un gestionnaire d'événement pour tous les éléments qui correspondent au sélecteur de courant, maintenant et dans l'avenir. Trouver ce qui m'amène à créer une fonction comme celle-ci:
```
$(document).live("ajaxStop", function (e) {
      $(".myDiagDiv").dialog("option", "position", "center");
});
```
Et le tour est joué! Il fonctionne comme un charme! Après la requête ajax est fait, la propriété position est modifiée et adaptée au contenu de la div et de ses dimensions!

Espère que cela aide les gens dans le futur!

EDIT: Vous pouvez utiliser la fonction ".sur()" au lieu de ".live()". Depuis le temps, j'ai écrit ma réponse, il me semble que la fonction ".live()" a été supprimée dans la version 1.9 de jQuery et remplacé par le nouveau. Une solution plus appropriée pour les utilisateurs de jQuery >= 1.9 serait quelque chose comme ceci:
```
$(document).on("ajaxStop", function (e) {
      $(".myDiagDiv").dialog("option", "position", "center");
});
```
OriginalL'auteur David
0

La boîte de dialogue par défaut est tout à fait relatif positionné.

La boîte de dialogue peut s'étendre sur le fait de donner automatique de la hauteur, mais lorsque la page défile à l'écran , la boîte de dialogue est de se repositionner.

La seule façon de le faire est d'appliquer ces styles de la boîte de dialogue
1. Position de la boîte de dialogue de la Fenêtre par
  
  position : ['center',<distance from top>]
2. Fixer la position à l'aide des feuilles de styles css
  
  .fixed-dialog { position:"fixed" }
3. Ajouter cette classe à la boîte de dialogue
  
  dialogClass : 'fixed-dialog'
Ainsi, la boîte de dialogue devrait ressembler
```
$('#dialog-div').dialog({
        position : ['center',10],
        dialogClass: "fixed-dialog"
    });
```
Pourquoi le 10 dans ['center',10]?

OriginalL'auteur madhairsilence
0
```
 Use this
    modal: true,
    width: '80%',
    autoResize:true,
    resizable: true,
    position: {
        my: "center top", 
        at: "center top", 
        of: window
    }
```
commande doit être de la même

Ce qui est autoResize? Pouvez-vous de référence de la documentation?
autoresize est une fonction intégrée de propriété qui u pouvez-vous pour votre fenêtre modale et il est de type booléen.
Je ne le vois pas dans le documentation. Pouvez-vous me diriger vers elle? Merci

OriginalL'auteur Mohit Singh

J'utilise cette fonction:

function centerDialog(id){

  var d = $('#'+id).closest('.ui-dialog'),
      w = $(window);

  d.css({

    'top':(w.height()-d.outerHeight())/2,
    'left':(w.width()-d.outerWidth())/2

  });

}

OriginalL'auteur gadlol

0

Positionnement était bien avant que je déménage boîte de dialogue contenu ajax source, après lequel le positionnement a été un problème. Ci-dessous travaillé pour moi aujourd'hui.
```
$('#formdialog').dialog({autoOpen: false, modal: true, title:'Dialog Title',  
    position: {
    my: "center top", 
    at: "center top+50", 
    of: window
}});
```
Noter que le "+50 " est "50px de haut en bas" et les œuvres de savoir si l'ajout de la rubrique "mon" ou "en ligne". Des espaces non autorisés. Par exemple: "centre de haut + 50" ne fonctionnera pas.

Voir plus d'informations dans la documentation l'option-position

OriginalL'auteur Chris

Vous devez vous connecter pour publier un commentaire.