티스토리 뷰

Flash를 홈페이지에 넣고... jquery로 z-index로 모달을 만들어서 사용 할려고 하면, flash가 z-index와는 아무 상관 없이.. 떡하니.. 위에 나오는 문제가 발생합니다.
이를 해결 하는 방법은 아래와 같습니다.

여기에서 사용한 swfobject.js는 아래 주소의 swfobject 최신 버전을 사용했습니다.


<script type="text/javascript" src="./swfobject.js"></script>
<style type="text/css">
    #test
    {
        position: absolute;
        top: 100px;
        left: 200px;
        width: 400px;
        height: 200px;
        background-color: #ccc;
        padding: 10px;
        color: #333;
        font-family: georgia;
        font-size: 2em;
    }
</style>
</head>
<body bgcolor="#ffffff">

<div id="flash">
        <h1>Alternative content</h1>
        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
<div id="test">테스트 레이어</div>

<script type="text/javascript">
    var flashvars = false;
    var params = {
    };
    var attributes = {
    };

    swfobject.embedSWF("./wmode.swf", "flash", "320", "270", "9.0.0", "/public/swf/expressInstall.swf", flashvars, params, attributes);
</script>

분명히 test 위치해 있는데.. flash가 떡하니 위로 나오는 문제가 발생합니다.


해결 방법은 간단합니다.

<style type="text/css">
    #test
    {
        position: absolute;
        top: 100px;
        left: 200px;
        width: 400px;
        height: 200px;
        background-color: #ccc;
        padding: 10px;
        color: #333;
        font-family: georgia;
        font-size: 2em;
    }
</style>
</head>
<body bgcolor="#ffffff">

<div id="flash">
        <h1>Alternative content</h1>
        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
<div id="test">테스트 레이어</div>

<script type="text/javascript">
    var flashvars = false;
    var params = {
        wmode: 'opaque'
    };
    var attributes = {
    };

    swfobject.embedSWF("./wmode.swf", "flash", "320", "270", "9.0.0", "/public/swf/expressInstall.swf", flashvars, params, attributes);
</script>

params에 wmode: 'opaque'를 추가해 주면 아래와 같이 정상적으로 출력 됩니다.
원래는 flash에서 기본으로 만들어 태그에서 수정해 볼려고 했는데, 이상하게 거기서는 이 방법이 통하지 않아서.. swfobjectf를 사용해서 이 문제를 해결 했습니다.


예제 다운로드 :

댓글
댓글쓰기 폼
공지사항
Total
1,667,607
Today
132
Yesterday
308
«   2019/12   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        
글 보관함