Obtenir la position supérieure de la boîte de dialogue dans JQuery

Question

J'utilise le position option on JQuery dialog plugin. J'essaie de comprendre comment obtenir seulement les valeurs "haut" et "gauche" de cet objet de position. Cependant, j'ai de la difficulté à comprendre cela. En ce moment, j'ai une boîte de dialogue définie comme suit:

<a href="#" onclick="showHelp();">help</a> 
<div id="helpDialog" title="Help"> 
    Some Help related text 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#helpDialog").dialog({ 
     autoOpen: false, 
     modal: true, 
     buttons: { 
     'OK': function() { 
      $(this).dialog('close'); 
     } 
     } 
    }); 
    }); 

    function showHelp() { 
    $("#helpDialog").dialog("open"); 
    var p = ("#helpDialog").dialog("option", "position"); 
    alert(/* what goes here? */); 
    } 
</script> 

Lorsque cette boîte de dialogue ouvre, je veux afficher le « top » et la position « gauche » de la boîte de dialogue dans une fenêtre « alerte ». Mais je ne peux pas le comprendre. Quelqu'un peut-il me montrer? Merci!

Answer 1

Vous pouvez utiliser .offset() pour obtenir le décalage du contenu<div> comme ceci:

function showHelp() { 
    var o = $("#helpDialog").dialog("open").offset(); 
    alert("Top: " + o.top + " Left : " + o.left); 
}​ 

Pour obtenir le décalage de la boîte de dialogue d'ensemble, vous devez remonter d'un niveau à l'.ui-dialog il est contenu dans en utilisant .closest(), comme ceci:

function showHelp() { 
    var o = $("#helpDialog").dialog("open").closest('.ui-dialog').offset(); 
    alert("Top: " + o.top + " Left : " + o.left); 
}​ 

la deuxième version obtenir la position du coin supérieur gauche de la boîte de dialogue d'ensemble, y compris le titre b ar/border, le premier obtient le haut-gauche du div dans le dialogue, sans compter celui-ci.