728x90
레이어팝업이란?
DIV 태그를 이용한 방법으로 사용자가 팝업 수행을 요청하면 DIV 영역을 제외한 부분의 명암이 어두워지면서 팝업이 띄워지는 형태를 말합니다. 대표적으로 아마존닷컴 같은 쇼핑사이트에서 이미지를 표시할 때 많이 사용됩니다.
그럼 샘플 소스를 통해 레이어팝업 예제를 수행해 보겠습니다.
<script src="http://code.jquery.com/jquery-1.7.js" type="text/javascript"></script>
<script src="jquery.bpopup.min.js"></script>
<script type="text/javascript">
function go_popup() {
$('#popup').bPopup();
};
</script>
<style type="text/css">
.Pstyle {
opacity: 0;
display: none;
position: relative;
width: auto;
border: 5px solid #fff;
padding: 20px;
background-color: #fff;}
.b-close {
position: absolute;
right: 5px;
top: 5px;
padding: 5px;
display: inline-block;
cursor: pointer;}
</style>
<body>
<input type="button" value="클릭" onclick="go_popup()">
<div id="popup" class="Pstyle">
<span class="b-close">X</span>
<div class="content" style="height: auto; width: auto;">
레이어 팝업이 완성 되었습니다. <br>팝업에 대한 크기는 content div에서 조정이 가능합니다
</div>
</div>
</body>
결과물 :
반응형
'공부 > jQuery' 카테고리의 다른 글
| 제이쿼리 슬라이드 배너 (ulslide) (0) | 2021.09.26 |
|---|---|
| 제이쿼리 달력 달기 (datepicker) (0) | 2021.09.26 |
| jQuery 자식요소 내 요소 선택 (0) | 2015.12.07 |
| jQuery 선택자 (selector) (0) | 2015.11.19 |
| jQuery 기본 구조 (작성법) (0) | 2015.10.23 |
