초간단 배경 투명 레이어 팝업 띄우기
페이지 정보
작성자
운영자
쪽지보내기
메일보내기
자기소개
아이디로 검색
전체게시물
댓글 0건
조회 3,243회
작성일 20-11-03 19:41
본문
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>배경이 가려진 레이어 팝업 뛰우기</title>
<style>
/* 마스크 뛰우기(fixed로 하면 화면을 내려도 흰부분 안보임) */
#mask {
position:fixed;
width:100%;
height:100%;
z-index:9000;
background-color:#000;
display:none;
left:0;
top:0;
}
/* 팝업으로 뜨는 윈도우 css */
.popup{
display: none;
position:absolute;
left:50%;
top:50px;
margin-left: -500px;
width:1000px;
height:500px;
background-color:#FFF;
z-index:10000;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
//검은 막 띄우기
$(".openMask").click(function(e){
e.preventDefault();
$("#mask").fadeTo("slow",0.6);
$(".popup").show();
});
//닫기 버튼을 눌렀을 때
$(".popup .close").click(function (e) {
//링크 기본동작은 작동하지 않도록 한다.
e.preventDefault();
$("#mask, .popup").hide();
});
//검은 막을 눌렀을 때(이것도 필요 없으면 삭제해도 됨)
$("#mask").click(function () {
$(this).hide();
$(".popup").hide();
});
});
</script>
</head>
<body>
<div id ="wrap">
<div id = "container">
<div id="mask"></div>
<div class="popup">
<p style="width:1000px;height:500px;text-align:center;vertical-align:middle;">팝업 내용 입력</p>
<p style="text-align:center; background:#ffffff; padding:20px;"><a href="#" class="close">닫기X</a></p>
</div>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<a href="#" class="openMask">레이어 팝업 발생</a>
</td>
</tr>
</table>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.