레이어 팝업과 윈도우 팝업을 만들어 봅니다.
html
<!-- 레이어 팝업 -->
<div id="layer">
<img src="img/webstandard1.jpg" alt="레이어팝업">
<a href="#" class="close">닫기</a>
</div>
<!-- 윈도우 팝업 -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>윈도우팝업</title>
<style>
* {margin: 0; padding: 0;}
img {width: 100%;}
</style>
</head>
<body>
<div><img src="img/webstandard2.jpg" alt="윈도우팝업"></div>
</body>
</html>
CSS
/* 레이어 팝업 */
#layer {display: none; position: fixed; left: 50px; top: 50px; width: 700px;
border: 10px solid #dceff7; box-shadow: 3px 3px 10px rgba(0,0,0,0.4);}
#layer img {width: 100%; display: block;}
#layer .close {position: absolute; right: 20px; top: 20px;
background: #0093bd; padding: 1px 6px; color: #fff;}
#layer .close:hover {text-decoration: underline;}
스크립트
//레이어 팝업
$(".popup ul li:first").click(function(e){
e.preventDefault();
$("#layer").fadeIn(400);
});
$("#layer .close").click(function(e){
e.preventDefault();
$("#layer").fadeOut(400);
});
//윈도우 팝업
$(".popup ul li.windows").click(function(e){
e.preventDefault();
//window.open("파일명", "팝업이름", "옵션설정");
//옵션: left, top, width, height, status, toolbar, location, menubar, scroollbars, fullscreen
window.open("popup.html","windowpopup","width=800, height=570, left=50, top=50,
scroollbars=0, menubar=0, toolbar=0")
});'웹사이트 만들기 > JQuery' 카테고리의 다른 글
| [사이트 추천] 제이쿼리로 배너를 만들고 싶을 땐? Slick! (0) | 2019.12.25 |
|---|---|
| 특정 버튼을 클릭 했을 때 무언가를 나타나게 하는 제이쿼리 코드 (0) | 2019.12.24 |