티스토리 스킨 만들기 [3] 팝업창 띄우기 , 소소한 팁 - 인스티즈(instiz) 글잡담 S 카테고리

모바일 (밤모드 이용시)

인기글

글잡담 S 클래스룸 전체 카테고리

공부법 클래스룸 성공담 공지사항 학습노트 실패담 도전기록

초록글 티스토리 스킨 만들기 [3] 팝업창 띄우기 , 소소한 팁3 l 클래스룸

새 글 (W) 17

티스토리 전체글l6년 전l조회 2435l 14

티스토리 스킨 만들기 [3] 팝업창 띄우기 , 소소한 팁 | 인스티즈

팝업창 띄우기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
        <div class="back">
      <div class="new">
      <div class="xxx">XX</div>
        
        <ul>
          <li>
            
            <ul>
                <li>
            “And now here is my secret, a very simple secret:<br> It is only with the heart that one can see rightly; what is essential is invisible to the eye.” <br>
― Antoine de Saint-Exupéry, The Little Prince
                    
                </li>
          
          </ul>
        
        </div>
    </div>
Colored by Color Scripter
cs

코드설명

back : 화면을 가리는 검정 화면!

new : 내용이 뜨는 하얀 화면

xxx : 누르면 없어지는 아이콘?! 이라고 해야하나..

ul li 안에 내용을 쓰면 공지로 뾰로롱!

티스토리 스킨 만들기 [3] 팝업창 띄우기 , 소소한 팁 | 인스티즈

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.back { display:none; position:fixed; z-index:99; width:100%; top:0; left:0; bottom:0; right:0; background:rgba(0, 0, 0, 0.6); }
.new {

    position: absolute;
    z-index: 100;
    width: 600px;
    top: 50%;
    left: 50%;
    text-align: left;
    opacity: 1;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    padding: 20px;
    color: rgba(39,39,39,1.00);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}
.xxx .xx {
    float: right;
    color: rgba(255,255,255,1.00);
    margin-right: 150px;
}
Colored by Color Scripter
cs

여기는 코드설명 사진으로 할게

티스토리 스킨 만들기 [3] 팝업창 띄우기 , 소소한 팁 | 인스티즈

제일 중요한

1
2
3
4
5
6
7
8
9
  
<script>
$("누르면 팝업창을 띄울 아이콘").click(function(){
$(".back").fadeIn(); //클릭시 나타남
});
$(".back .xxx").click(function(){
$(".back").fadeOut(); //클릭시 사라짐
}); 
</script>
cs


자바 스크립트!

누르면 팝업창을 띄울 아이콘은 저기 위에 사진에선 벨 모양 보이지?
저 모양을 누르면 나는 팝업창을 뜨게했어
벨 모양 클래스를 저기 집어넣으면 돼!
대충 눈썰미있는 사람들은 딱 보면 알것같다 ㅠㅠ 이건 뭐라고 설명을 못해주겟어
코드에 다 나와있거든...ㅜㅜㅜ




팝업창 띄우기 끝!
간단하징?






그외 내가 자주쓰는 코드~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!--단축키--> 
<script type="text/javascript"> 
 
var key = new Array(); 
key['c'] = "/category"; 
key['w'] = "/admin/entry/post"; 
key['g'] = "/guestbook"; 
 
 
function getKey(keyStroke) { 
 if ((event.srcElement.tagName != 'INPUT') && (event.srcElement.tagName != 'TEXTAREA')){ 
  isNetscape=(document.layers); 
  eventChooser = (isNetscape) ? keyStroke.which : event.keyCode; 
  which = String.fromCharCode(eventChooser).toLowerCase(); 
  for (var i in key) 
  if (which == i) window.location = key[i]; 
 } 
} 
document.press = getKey; 
</script> 
<!--/단축키-->
Colored by Color Scripter
cs


단축키 


1
2
3
4
5
6
7
<script type="text/javascript"> 
var add = location.href; 
if(add == "본인 티스토리 주소"){ 
location.href="원하는 티스토리 게시글 주소"; 
} 
</script> 
 
Colored by Color Scripter
cs


원하는 글 첫화면으로 하기


티스토리 메뉴바 없애기

#tistorytoolbarid { display:none; } 







헉 헉,,, 그럼 안농!