1

最近、私は理解しようとしているシナリオに出くわしました。すでに回避策があり、仕事は完了していますが、シナリオが実際に発生した理由をまだ理解できていません。問題は厳密にプログラミングに基づいているので、stackoverflow で許可されることを願っています。

ページにDivがありました：

<DIV id="tos3" >
<FONT size=2 face=Arial color=#009a00><B>How to request Business Applications Software </B></FONT>
<BR/><BR/>
<FONT size=2 face=Arial color=#000000>
<select id="segment" onchange="getSecondDropdown(this);"><option value="Segment">Select Segment</option>
  <option value="E&P">E&P</option>
  <option value="R&M">R&M</option>
  <option value="IST">IST</option>
  <option value="Functions">Functions</option>
  <option value="Other">Other</option>
</select>
<select id="DivisionDP" disabled="disabled"  onchange="getDetails();"><option value="Division">Select Division/SPU/Region</option>
</select>
<DIV id="infoDetails"></DIV>
</FONT>
</DIV>

関連する Javascript:

function getSecondDropdown(e)
{
// get the values in seconnd drop down
}
function getDetails()
{
// display details based on selection
}

ページ上では問題なく動作していました。この div をポップアップに表示するリクエストが来ました。マスター ページにポップアップ コードがあり、サイト全体でデータを表示するために使用されています。

 <div id="testDiv" style="border-left:2px solid #99cc00;border-right:2px solid #99cc00;border-top:2px solid #4c4c4c;border-bottom:2px solid #4c4c4c;width:500px;display:none;background-color: #eeeeee;z-index:1000;padding:10px 10px 10px 10px">
<div align="right" style="height:25 px;">
<a style="cursor:pointer" onClick="closePouUp()">close</a>
</div>
<div id="contentDiv" style="overflow:auto;"> testDiv content</div>
 </div>

<div id="greyout" style="background-color: black; display:none;z-index:400;filter: alpha(opacity=70);opacity: 0.7;width:100%;   height:100%;">
</div>

function ShowHideProduct(sValue,flag)
{


var customCopyrightContainer;
customCopyrightContainer = document.getElementById(sValue);
divRef = document.getElementById('testDiv');
innerDiv=document.getElementById('contentDiv');
if(flag==1)
{
innerDiv.style.height = "300px";
}
innerDiv.innerHTML= customCopyrightContainer.innerHTML;
 // Get the screen dimensions...
 var screenSize = getViewportSize();
 var screenWidth = screenSize.width;
 var screenHeight = screenSize.height;


 // Get the element dimensions...
 var elementSize = getElementSize(divRef);
 var elementWidth = elementSize.width;
 var elementHeight = elementSize.height;

// Calculate the centering positions...
 var xPos = (screenWidth - elementWidth) / 2;
 var yPos = (screenHeight - elementHeight) / 2;
 yPos=document.body.scrollTop/2+yPos;
var body = document.body,
    html = document.documentElement;

var height = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );


//make page greyout
greyOutDiv=document.getElementById('greyout');
greyOutDiv.style.position = 'absolute';
greyOutDiv.style.left = '0px';
greyOutDiv.style.top = '0px';
greyOutDiv.style.width = '1500px';
greyOutDiv.style.height = height + 'px';
greyOutDiv.style.display = 'block';



 // Position the element...
 divRef.style.position = 'absolute';
 divRef.style.left = xPos + 'px';
 divRef.style.top = yPos + 'px';
 divRef.style.display = 'block';



if(flag==1)
{
divRef.style.height = "300px";
}
return;
            }

function closePouUp()
{
divRef = document.getElementById('testDiv');
greyOutDiv=document.getElementById('greyout');
divRef.style.display = 'none';
greyOutDiv.style.display = 'none';
}

同じコードを使用しましたが、機能が機能していませんでした。出力から、javasript innerHTML が一時オブジェクトを作成しているように感じました。最初のドロップダウンが getElementByID メソッドで機能していなかったので、これを感じましたが、メソッドで参照を渡すと機能しました。

これについての適切な説明は得られませんでした。

元の div をポップアップとして表示することで問題を解決しました。だから今、私は正確に何が起こったのかを理解しようとしています。

4

0 に答える 0