Javascriptで別の要素の下に要素を配置する

私はここで「フラグ」リンクをクリックしたときに表示されるようなダイアログを作成しようとしています（ただし、JQueryやその他のライブラリは使用しません）。Javascriptで別の要素の下に要素を配置する

以下のコードは、[ダイアログを表示]リンクがクリックされたときにダイアログを表示します。このコードは、ページのテキストのサイズが変更されたときにダイアログがリンクの下に表示されない場合、どのように修正できますか？

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

出典

2009-05-08 123

このシナリオでは非常にうまく機能する「ハック」があります。 window.onresize（）イベント内のリンクのclickイベントを発生させるだけです。

は、スクリプトタグの先頭に次の行を追加します。ハック

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

出典

2009-05-08 10:42:26

が実際に動作します。 +1 – ichiban

Javascriptで別の要素の下に要素を配置する

答えて

関連する問題