Positionner un élément sous un autre élément en Javascript

J'essaye de créer une boîte de dialogue similaire à celle qui s'affiche en cliquant sur le lien 'flag' ici sur SO (sans utiliser JQuery ni aucune autre bibliothèque).Positionner un élément sous un autre élément en Javascript

Le code ci-dessous affiche une boîte de dialogue lorsque le lien Afficher la boîte de dialogue est cliqué. Le code fonctionne très bien sauf une chose qui est que lorsque le texte de la page est redimensionné, la boîte de dialogue ne s'affiche pas en dessous du lien, comment cela peut-il être corrigé?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Test</title> 
<script type="text/javascript"> 

function ShowDialog(link) 
{ 
    var dlgID = "popupDialog"; 
    if(!document.getElementById(dlgID)) 
    { 
    dialog = document.createElement("div"); 
    dialog.id = dlgID; 
    dialog.style.position = "absolute"; 
    dialog.style.width = "200px"; 
    dialog.style.zIndex = "100"; 
    dialog.style.padding = "10px"; 
    dialog.style.backgroundColor = "#FF0000"; 
    dialog.innerHTML = 
     "Violation Type:<br />" + 
     "<input type='radio' id='Option1' name='ViolationType' checked='checked' /><label for='Option1'> Option 1</label><br />" + 
     "<input type='radio' id='Option2' name='ViolationType' /><label for='Option2'> Option 2</label><br />" + 
     "<input type='radio' id='Option3' name='ViolationType' /><label for='Option3'> Option 3</label><br />" + 
     "<input type='radio' id='Option4' name='ViolationType' /><label for='Option4'> Option 4</label>" + 
     "<p style='text-align:right;margin-top:10px;'><input type='button' value='OK' /> <input type='button' value='Cancel' /></p>"; 
    document.body.appendChild(dialog); 
    } 
    else 
    { 
    dialog = document.getElementById(dlgID); 
    } 

    dialog.style.visibility = "visible"; 
    dialog.style.left = getX(link) + "px"; 
    dialog.style.top = getY(link) + link.offsetHeight + "px"; 
} 

function getY(oElement) 
{ 
    var iReturnValue = 0; 
    while (oElement != null) 
    { 
    iReturnValue += oElement.offsetTop; 
    oElement = oElement.offsetParent; 
    } 
    return iReturnValue; 
} 

function getX(oElement) 
{ 
    var iReturnValue = 0; 
    while (oElement != null) 
    { 
    iReturnValue += oElement.offsetLeft; 
    oElement = oElement.offsetParent; 
    } 
    return iReturnValue; 
} 

</style> 
</head> 
<body> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin enim diam, imperdiet eget, luctus eget, rhoncus vel, lacus. Maecenas ipsum nulla, pretium vel, vehicula a, tincidunt luctus, dui. Donec adipiscing. Sed aliquet, lorem id porttitor vestibulum, libero pede pretium sem, id iaculis mauris ante a orci. Etiam mi felis, adipiscing nec, aliquet vel, hendrerit non, libero. Curabitur posuere pede vitae enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin sem. Pellentesque iaculis. Morbi at tellus a velit venenatis tempor. Vivamus quam augue, commodo sed, dapibus nec, posuere in, augue. Mauris ultrices. Integer fringilla turpis et dui. Quisque varius elementum ipsum. Aenean pede. Sed vestibulum condimentum ipsum.<br /> 
Lorem ipsum dolor sit amet <a href="#" onclick="ShowDialog(this);return false;">Show Dialog</a><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin enim diam, imperdiet eget 
</body> 
</html>

Source

2009-05-08 123

Voici un "hack" qui fonctionne très bien dans ce scénario. Il suffit de déclencher l'événement click pour le lien dans l'événement window.onresize().

Ajouter ce qui suit à la partie supérieure de votre balise script:

<script type="text/javascript"> 
var myLink; 
window.onresize = function() 
{ 
    myDialog = document.getElementById("popupDialog"); 
    if(myDialog && myDialog.style.visibility == "visible") 
    {   
     myLink.fireEvent("onclick"); 
    } 
} 
function ShowDialog(link) 
{ 
    myLink = link; 
    var dlgID = "popupDialog"; 
    if(!document.getElementById(dlgID)) 
    { 
    dialog = document.createElement("div"); 
    dialog.id = dlgID; 
    dialog.style.position = "absolute"; 
    dialog.style.width = "200px"; 
    dialog.style.zIndex = "100"; 
    .........

Source

2009-05-08 10:42:26

Ce pirater fonctionne réellement. +1 – ichiban

Positionner un élément sous un autre élément en Javascript

Répondre

Questions connexes