•본 코드는 개인적인 공부용으로 또는 그냥 생각나는 데로 만들어 본, 초보 개발자의
쓰레기 코드 입니다. 아무렇게나 수정 하실 수 있으며 코드에 관한 개선사항은 언제든지 환영합니다.
jQuery로 만들어진 멋진 UI의 해외 싸이트를 구경 다녀 보면 "도대체 어떻게 이렇게 만들었지?"
라는 의문이 내 가슴을 뛰게 한다 -.-;
그 멋진 싸이트들에서 보면 빠지지 않고 등장하는 것이 overay, expose, modal window 등등인데
뭐.. 어떤 소스코드도 참고하지 않은채 그냥 생각나는데로 만들어 봤다.
반투명 div 태그에 투명도를 주고 전체를 덮어 버리면 overy 효과다;
동시에 숨겨 뒀던 div 태그를 보여주면 이것 또한 완벽한! modal window가 된다..
오버레이 효과로 반투명하게 뒤 덮는 것과 모달 창의 효과는
z-Index 의 순서가 담당한다..
.
.
안습이다.. ㅠㅠ
아직 jQuery도 초짜고 javascript 의 effect 부분에서도 초짜지만..
뭐 비슷하겠지..?
 |
1. 글자 test for html 의 아래 텍스트 필드에 마우스를 올리면 이벤트가 발동한다
나머지 test 버튼이나 ds 테이블은 그냥 있는거다..; |
 |
2. 배경은 다 회색으로 덮는다. (overay), 동시에 덮혀진 div 태그로 인해 z-index가 아래에 있는 태그 컨트롤들은 작동 불가(modal) |
|
3. 아이디를 적고 버튼을 누르면 적용된다 |
 |
OK |
Source (Noname1.html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Study jQuery </TITLE>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() { // jQueryStart
// 오버레이 효과를 낼 div 를 만들어서 body의 끝에 달아둔다.
// z-index 가 중요하다..
$("body").append( $("<div id='bgdiv'></div>").css(
{background: '#333333',
width:'100%',
height:'100%',
position:'absolute',
opacity:'0.6',
'top':'0',
'left':'0',
'z-index':'10',
'display':'none'
}
));
// 텍스트 필드에 focus 이벤트 등록
// overay용 bgdiv 를 보여주고 modal 역할을 할 div를 보여준다.
$("#fts").focus( function() {
$("#bgdiv").show("fast");
$("#login").css("z-index","15").show("slow");
$("#logintext").focus();
});
$("#close_btn").click( function() {
var id_val = $("#logintext").val();
$("#fts").val(id_val);
$("div#login").hide("slow");
$("#bgdiv").hide("fast");
});
} ); // jQueryEnd
</script>
</HEAD>
<BODY>
<br>
<br>
<div>test for html</div>
<input type="text" id="fts"/>
<br>
<table border="2">
<tr><td>ds</td></tr>
</table>
<br>
<input type="button" value="test"/>
<!-- modal window div -->
<div id="login" style="position:absolute; display:none">
<table width="100" height="50" border="2" bgcolor="blue">
<tr>
<td bgcolor="white">
아이디:
</td>
<td bgcolor="white">
<input type="text" id="logintext"/><input type="button" id="close_btn" value="apply">
</td>
</tr>
</table>
</div>
</BODY>
</HTML>
jQuery 자바스크립트 파일을 준비하고
본 코드를 그대로 복사해서 가져다 써보면 작동한다.
근데..
..... 해외싸이트들도 이렇게 적용 시켰을까? -_-;
볼려고 해도 허벌나게 긴 소스들 보면 질려 ㅠㅠ
익스에서도 작동되게 하려면
답글삭제filter:alpha(opacity=60); opacity:0.6; 두가지를 함께 줘야 합니다. opacity는 익스에는 안됩니다.
@다니엘SEO - 2009/10/20 23:46
답글삭제의견 감사합니다. jQuery의 opacity 속성은 익스를 비롯한 거의 모든 브라우져에서 작동 하는 것으로 알고 있습니다. 또한 제 환경이 익스플로러라서...;
@sapphirez - 2009/10/24 12:42
답글삭제ie6,7,8 각각 확인해 보시면 아마 안될겁니다.
제가 해보고 안되길래 알려드립니다 ^^
@다니엘SEO - 2009/10/20 23:46
답글삭제제 익스플로러에서는 잘 되는데용..
좋은 글 감사합니다.
답글삭제