CSS로 간단한 Lightbox 만들기
페이지 정보
작성자 서방님 댓글 0건 조회 135회 작성일 11-08-30 15:28본문
<style type="text/css">
#underlay{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
/*
background-color:#000;
-moz-opacity:0.5;
opacity:.50;
filter:alpha(opacity=50);
*/
}
#lightbox{
display:none;
position:absolute;
top:100px;
left:25%;
width:50%;
height:auto;
background-color:#fff;
}
</style>
<a href="#" onclick="document.getElementById('underlay').style.display='block'; document.getElementById('lightbox').style.display='block';">Click Here</a>
<div id="underlay" onclick="document.getElementById('underlay').style.display='none'; document.getElementById('lightbox').style.display='none';">
</div>
<div id="lightbox" onclick="document.getElementById('underlay').style.display='none'; document.getElementById('lightbox').style.display='none';">
<img src="http://seobangnim.xinour.net/zbxe/layouts/bom/images/logo.gif">
</div>
출처 : http://stephenmcintyre.net/blog/simple-css-lightbox/
댓글목록
등록된 댓글이 없습니다.
