2013-12-03 3 views
1

JavaScript 및 CSS를 사용하여 iframe을 사용하여 메시지 대화 상자를 만들려고합니다. 내가 원했던 것은 opacity0.4 인 문서와 보여줄 메시지 상자입니다. 그러나 그 일은 일어나지 않습니다. 어떻게해야합니까?JavaScript -이 코드가 작동하지 않는 이유는 무엇입니까?

내 자바 스크립트

function messageBox(text) 
{ 
    document.style.opacity = 0.4; 
    document.style.filter = 'alpha(opacity=40);'; 
    var box = document.createElement('iframe'); 
    box.setAttribute('id', 'msgBox'); 
} 

내 CSS는

#msgBox 
{ 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    height: 250px; 
    width: 350px; 
    background-color: #CCC; 
    margin: auto; 
    z-index:9999; 
    color:white; 
    box-shadow:1px 1px 1px 1px #444; 
} 

http://jsfiddle.net/a4m9d/

+2

가 바이올린을 만들고 확인하시기 바랍니다. – AurA

+0

먼저 DIV로 시도한 다음 iFrame을 사용해보십시오. 문제는 iFrame이 될 수 있습니다 –

+0

직접 디버깅을 시도 했습니까? HTML은 어떤 모습입니까? 어떻게'messageBox'를 호출할까요? 콘솔에 오류가 있습니까? 'messageBox'가 호출되는 것이 확실합니까? –

답변

3
function messageBox(text){ 
    document.body.style.opacity = 0.4; 
    document.body.style.filter = 'alpha(opacity="40");'; 
    var box = document.createElement('iframe'); 
    box.id='msgBox'; 
    document.body.appendChild(box); 
} 

+0

고마워요 - 문서의 나머지 부분은 불투명도가 낮고 iFrame은 그렇지 않다는 것을 어떻게 확인합니까? – user2976089

+0

나머지 페이지를 div로 감싸고 해당 div의 불투명도를 설정하십시오. – aelgoa

1

documentstyle 속성이 없습니다. 요소 만 스타일을 가지고 있으며 document은 요소가 아닙니다.

<body>을 타겟팅하려는 경우 대신 document.body을 사용해보세요.

function messageBox(text) { 
    document.body.style.opacity = 0.4; 
    document.body.style.filter = 'alpha(opacity="40");'; 
    var box = document.createElement('iframe'); 
    box.setAttribute('id', 'msgBox'); 
} 

DEMO : 나는 성능과 유연성, 사업부 대신 iframe을 사용하는 것이 좋습니다 것이지만 http://jsfiddle.net/a4m9d/3/

관련 문제