https://mellowapricot.tistory.com/216

수정 배포합니다

https://mellowapricot.tistory.com/216

수정 배포합니다.

수정 자유롭게 가능 ㅣ 재배포 불가능 ㅣ 카피라이트 삭제 절대 금지

＞ LINK 버튼 누르면 나오는 창의 카피라이터는 완전히 제거 가능합니다

＞ html 하단의 <div class="copyright">~</div>는 제거 불가능합니다

190327 수정

다운로드시 기본적으로는 프로필사진 / ♥ / ARCHIVE / LINK 버튼을 누를 때 슬라이드가 활성화 됩니다.

스킨안내

색상코드　#000000 <포인트색은 #000000. 그 외 기본 검정색은 #000으로 구분했습니다.>

브라우저　익스플로러11 엣지 크롬 파이어폭스

사용방법　압축을 풀어 images 폴더에 담긴 것까지 모두 업로드해주세요.

모바일웹　블로그관리창 [꾸미기]탭의 [모바일]에서 모바일웹 자동연결 "사용하지 않습니다"로 설정해주세요.

사진변경　프로필 사진을 변경하시려면 블로그관리창 [관리]탭의 [블로그]에서 이미지를 변경해주세요.

기타 질문은 댓글로 부탁드립니다.

질문 전 중복 질문에 대한 답변 확인 해주세요,

스킨 변경 내역은 스킨 수정 안내에서 확인 부탁드립니다.

많은 사랑 감사했습니다! 확인한 게 몇 년이 지난 후라, 일부 댓글에 답변 못 드린 점 죄송합니다.

더이상 리뉴얼 전 버전에 대한 질문은 받지 않습니다.

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

정말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(); //클릭시 사라짐 
});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>