전체 페이지를 덮을 오버레이 표시

iframe 내에로드중인 웹 응용 프로그램이 있습니다. 전체 페이지를 덮기 위해 오버레이 div를 표시해야합니다. 문제는 오버레이 현재 iframe 지역에서만 표시하고 전체 페이지를 덮고되지 않는 것입니다, 같은 것을 시도전체 페이지를 덮을 오버레이 표시

출처

2012-08-25 KRR

'#overlay {위치 : 고정; 높이 : 100 %; 너비 : 100 %; 배경 : 검은 색; 불투명도 : 0.5;}' – adeneo

전체 창을 덮으려면 원래 창에서 오버레이 div를 만들어야하고 dom은 iframe이 아닙니다. –

@ThomasStachl 예 맞음, 우리는 원래 창 DOM에서 그것을 할 필요가있다, 많이 고마워. – KRR

(우리의 응용 프로그램 (자식 응용 프로그램) iframe 애플리케이션 로딩 세트의 일부입니다);

<!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" lang="EN"> 
<head> 
<style type="text/css"> 
html 
{ 
overflow: auto; 
} 

html, body, div, iframe 
{ 
margin: 0px; 
padding: 0px; 
height: 100%; 
border: none; 
} 

iframe 
{ 
display: block; 
width: 100%; 
border: none; 
overflow-y: auto; 
overflow-x: hidden; 
} 
</style> 
</head> 
<body> 

<iframe id="tree" name="myiframe" src="http://www.your_page.com/" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto"></iframe> 

</body> 
</html>

또는 다음과 같은 JavaScript를 사용할 수 있습니다.

<script type="Text/JavaScript" language="JavaScript"> 
<!-- 
function resize_iframe() 
{ 
    var height=window.innerWidth;//Firefox 
    if (document.body.clientHeight) 
    { 
     height=document.body.clientHeight;//IE 
    } 
    //resize the iframe according to the size of the 
    //window (all these should be on the same line) 
    document.getElementById("cam").style.height=parseInt(height- 
    document.getElementById("cam").offsetTop-8)+"px"; 
} 

// this will resize the iframe every 
// time you change the size of the window. 
window.onresize=resize_iframe; 

//Instead of using this you can use: 
// <BODY onresize="resize_iframe()"> 

</script> 
</head> 
<body> 
<iframe id="cam" width="100%" scrolling="yes" src="http://www.your_page.com" onload="resize_iframe()"> 
</iframe> 
</body>

희망이 도움이됩니다.

출처

2012-08-25 12:26:40

당신이

<div id="overlay"></div>

CSS처럼 뭔가를 할 수

#overlay 
{ 

    position:fixed; 
    top:0; 
    left:0; 
    bottom:0; 
    right:0; 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    background: #000000; 
    opacity: .3; 
    filter: alpha(opacity=30); 
    -moz-opacity: .3; 
    z-index: 101; 
}

Sample

출처

2012-08-25 12:33:50 freebird

전체 페이지를 덮을 오버레이 표시

답변

관련 문제