[javascript] ff에서 불투명 레이어 안먹힐 때

http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=qna_html&wr_id=111366

 

ff 에서 불투명 레이어 안먹힐 때.

 

.style.opacity = "0.x";

 

 

<div id="opqueLayer" style="display:block";></div>

<div class="layer_pltbody" style="display:block;" id="alertPopup01"></div>

 

<script type="text/javascript">

/* 화면전체를 덮을 영역 계산 */
oDiv = document.getElementById('opqueLayer');
oDiv.style.width="100%";
oDiv.style.height=document.body.scrollHeight;

//alert(document.body.clientHeight);
/* 불투명레이어와 알림팝업을 띄우는 함수 */
//viewAlertLayer01(알림팝업의id)  형식으로 호출하여 사용
obj_alertPop = document.getElementById('alertPopup01');//알림창객체
document.getElementById('opqueLayer').style.display = "block";//불투명레이어보이게함
var ver = getInternetExplorerVersion();
if ( ver>= 8.0 ) {
 obj_alertPop.style.top = (((document.body.clientHeight + (document.body.clientHeight/2)) - (obj_alertPop.clientHeight/2)))+300 + "px";//팝업레이어 topleft의 y좌표
obj_alertPop.style.left = ((document.body.scrollLeft + (document.body.clientWidth/2)) - (obj_alertPop.clientWidth/2))  + "px";//팝업레이어의 topleft x좌표
}

obj_alertPop.style.top = (((document.body.clientHeight + (document.body.clientHeight/2)) - (obj_alertPop.clientHeight/2))) + "px";//팝업레이어 topleft의 y좌표
obj_alertPop.style.left = ((document.body.scrollLeft + (document.body.clientWidth/2)) - (obj_alertPop.clientWidth/2))  + "px";//팝업레이어의 topleft x좌표
/*
obj_alertPop.style.top = ((document.body.scrollTop + (document.body.clientHeight/2)) - (obj_alertPop.clientHeight/2)) + "px";//팝업레이어 topleft의 y좌표
obj_alertPop.style.left = ((document.body.scrollLeft + (document.body.clientWidth/2)) - (obj_alertPop.clientWidth/2))  + "px";//팝업레이어의 topleft x좌표
*/
/* 덧글이열렸을 때 화면전체를 덮을 영역 재계산 */
oDiv = document.getElementById('opqueLayer');
oDiv.style.width="100%";
oDiv.style.height=document.body.scrollHeight;

/* 팝업내의 닫기/취소 버튼을 눌렀을 때 레이어를 닫기위해 사용하는 함수 */
function hideAlertLayer01(objName) {
 document.getElementById(objName).style.display = "none";
 document.getElementById('opqueLayer').style.display = "none";
}
</script>

 

IE 와 FF의 차이점

IE 와 FF(firefox) 의 차이점

1. hand 는 웹표준이 아니여서 익스에서만 된다. 다음부턴다음부턴 pointer 를 쓰자.

cursor:hand(x) --> cursor:pointer(0)

2. FF에서의 javascript 는 function 밖에서밖에서 변수 초기화가 되지 않는다.
예를들어 아래 소스를 보자.

[code]var timeInterval = 5000;

function startInterval() {
    setTimeout("test()",timeInterval);setTimeout("test()",timeInterval);
}
function test() {
    alert("hello!");
}
startInterval();[/code]

IE 에선 5초있다가 test() 를 실행하게되지만 FF 에선 바로 test() 가가 실행된다.
이유는 timeInterval 이 초기화 되지 않기 때문이다.
유의하자.


3. FF 에선 selectSingleNode 와 같은 XPATH 탐색 함수가 지원되지지원되지 않는다.
예를들어 IE 의 아래와같은 구문은

[code]var objobj = xmlObj.selectSingleNode("root/subnode");[/code]

FF에선안되고 아래와 같이 바꿔야 IE,FF 모두 쓸수있다.쓸수있다.

[code]var obj = xmlObj.getElementsByTagName("root")[0].getElementsByTagName("subnode")[0];[/code]

XPATH 가 웹표준이 아니었나?아니었나? 상당히 편했는데 하루빨리 지원됬으면 좋겠다.


4. IEIE 에서 노드 탐색시 .text 로 텍스트를 불러올수있는데 FF 에선 불가능하다.
아래 소스는 IE 에서는 가능하나 FF 에선 불가능하다.

[code]var text = xmlObj.getElementsByTagName("root")[0].text[/code]

모두 가능하게 하려면하려면 아래 소스를 쓰자

[code]var text = xmlObj.getElementsByTagName("root")[0].firstChild.nodeValue;[/code]

5. 위지윅 에디터 모드 변경법
IE 에서는에서는 어떤 오브젝트든 contentEditable="true" 라는 플랙만 주면 에디터 모드가 된다. 예를들면 아래와아래와 같다

[code]<div id="editor" contentEditable="true"></div>[/code]

FF 에서는 아래와같이 javascriptjavascript 로 designMode 를 On 시켜줘야 한다.

[code]editor.contentDocument.designMode="On";[/code]

FFFF 에서는 document 객체에서 designMode 를 켜줘야 하기때문에 iframe 으로 써야한다.

 

출처 : http://cranix.net/250

파이어폭스에서 document.body.scrollTop이 안된다?

http://paranbarami.tistory.com/314

 

 

결론은 + "px"