티스토리 스킨 만들기 [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 안에 내용을 쓰면 공지로 뾰로롱!

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

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

제일 중요한

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; } 

헉 헉,,, 그럼 안농!

[독자2]

팝업창 너무 궁금했는데 설명 고마워!8ㅅ8

[독자3]

고마워!! ♥♥

[독자4]

이런 좋은 글을 이제서야 발견하고,, 뒷북댓을 다는 내가 밉다 고마워ㅠㅠㅠㅠㅠㅠㅠㅠ