Positionieren eines Elements unter einem anderen Element in Javascript

Ich versuche, einen Dialog ähnlich dem zu erstellen, der beim Klicken auf den Link "Flag" hier auf SO zeigt (ohne JQuery oder andere Bibliotheken zu verwenden).Positionieren eines Elements unter einem anderen Element in Javascript

Der folgende Code zeigt ein Dialogfeld an, wenn auf den Link Dialog anzeigen geklickt wird. Der Code funktioniert sehr gut, mit der Ausnahme, dass wenn der Text der Seite in der Größe geändert wird, der Dialog unterhalb des Links nicht angezeigt wird, wie kann das behoben werden?

<!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>

Quelle

2009-05-08 123

Hier ist ein "Hack", der in diesem Szenario sehr gut funktioniert. Starten Sie das click -Ereignis für den Link innerhalb des window.onresize() -Ereignisses.

folgendes an die Spitze Ihres Script-Tag hinzufügen:

<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"; 
    .........

Quelle

2009-05-08 10:42:26

das tatsächlich funktioniert hacken. +1 – ichiban

Positionieren eines Elements unter einem anderen Element in Javascript

Antwort

Verwandte Themen