Flash를 홈페이지에 넣고... jquery로 z-index로 모달을 만들어서 사용 할려고 하면, flash가 z-index와는 아무 상관 없이.. 떡하니.. 위에 나오는 문제가 발생합니다.
이를 해결 하는 방법은 아래와 같습니다.
여기에서 사용한 swfobject.js는 아래 주소의 swfobject 최신 버전을 사용했습니다.
분명히 test 위치해 있는데.. flash가 떡하니 위로 나오는 문제가 발생합니다.
해결 방법은 간단합니다.
params에 wmode: 'opaque'를 추가해 주면 아래와 같이 정상적으로 출력 됩니다.
원래는 flash에서 기본으로 만들어 태그에서 수정해 볼려고 했는데, 이상하게 거기서는 이 방법이 통하지 않아서.. swfobjectf를 사용해서 이 문제를 해결 했습니다.
이를 해결 하는 방법은 아래와 같습니다.
여기에서 사용한 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>
<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>
#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를 사용해서 이 문제를 해결 했습니다.
예제 다운로드 :
flash-z-index.zip
댓글