#F8B878

그동안 물어보는 분들이 꽤 계셨기에 따로 강좌 올립니다

정말x165343 간단한 기능이며 질문은 받지 않겠습니다

다른 사이트 강좌로 올리지 마세요

예시 사진

해당 기능을 사용하기 위해서는 html/css와 제이쿼리 fadeIn, fadeOut에 대한 이해만 있으면 가능합니다.

적용하려는 곳이 티스토리이며, 기본적인 이해가 있다는 가정 하에 설명하겠습니다.

혹시 모를 오류가 있을 수 있으니 적용 전 백업은 필수입니다.

(1) 팝업 실행 버튼 부분 html (위 예시는 카테고리 부분)

(팝업 버튼을 위한 html이며 카테고리 부분이든 어디든 상관 없지만 <팝업을 실행하려는 버튼>에 notice_g라는 id(선택자) 부여는 반드시 필요. id를 class로 바꿔도 상관없음 단 스크립트 또한 .notice_g로 변경해야함)

(2) 팝업창 html

html의 body안 아무곳에나 붙여넣음 </s_t3> 바로 위에 붙여넣어도 됨

(3) 팝업창 부분 css

css 아무 곳에나 넣으면 됨.

단 이미 css z-index가 99~100보다 큰 class/id가 있으면 값을 더 크게 변경해야 함

(예: background > z-index:500/ .n_profile > z-index:501)

.background { ~ } : 투명도 60%의 검정색 바탕을 화면 전체에 깔아버리는 것

.n_profile { ~ } : 화면 가운데에 가로길이 600px의 하얀색 팝업창

투명한 팝업창이 하고 싶다면 background:#FFF를 삭제하거나 background:none으로 설정하면 되겠음

(4) 팝업 기능을 위한 스크립트

</body>의 바로 위에 넣거나 </head>의 바로 위에 넣음

#notice_g를 누르면 (2) <div class="background"> ~ </div> 안의 내용이 나타나고,

background 안의 닫는 버튼을 누르면 (2) <div class="background"> ~ </div> 의 내용이 사라지게 하는 스크립트임.

예제 테스트 (클릭)

예제 페이지의 TEST4를 누르면 팝업이 나타나고

닫는 버튼을 누르면 다시 사라지는 것을 볼 수 있습니다~ (현 스킨 사이드바의 네번째 아이콘에서도 확인 가능)

이러한 기본 기능만 알면 응용해서 더 다양하게 만들 수 있습니다

예제 html/css/jquery 건들다 보시면 감이 오실 거예요.

html

<div class="background"> 
	<div class="n_profile"> 
		<div class="xx">닫는 버튼</div> 
		<ul> 
			<li>테스트 1</li> 
			<li>테스트 2</li> 
		</ul> 
	</div> 
</div><!-- /background -->

css

.background {
  display: none;
  position: fixed;
  z-index: 99;
  width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}

.n_profile {
  position: absolute;
  z-index: 100;
  width: 600px;
  top: 50%;
  left: 50%;
  text-align: center;
  background: #FFF;
  opacity: 1;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

jquery

$("#notice_g").click(function(){ 
	$(".background").fadeIn(); //클릭시 나타남 
}); 
$(".background .xx").click(function(){ 
	$(".background").fadeOut(); //클릭시 사라짐 
});

팝업창 추가하는 법

티스토리툴바