336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
.
제이쿼리인지 자바스크립인지 정확히 잘모르겠으나, 팝업 만들기를 제작했습니다.
자세한 설명은..다음에 하도록 하겠습니다..
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>팝업만들기</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function(){ function blind(){ $('body').append("<div class='blind'></div>"); $('.blind').fadeTo(500,.5) } $('.popup').click(function(){ blind() console.log('okk') $('.popup_wrap').fadeIn(); }) $('.close').click(function(){ $('.blind').fadeOut(); $('.popup_wrap').fadeOut(); }) }) </script> <style> .blind{ position: absolute; background-color: #000; display:none; opacity: 0.5; left:0; right:0; top:0; bottom:0; } .popup_wrap{ width: 300px; height: 300px; position: absolute; border: 1px solid #000; left:50%; top:50%; margin-left: -200px; margin-top: -200px; background-color: #fff; z-index:1; display: none; } </style> </head> <body> <button class="popup"> 팝업열기</button> <div class="popup_wrap"> <img src="1072.jpg"> <button class="close">닫기</button> </div> </body> </html> | cs |
.
'기타 > -자바스크립트&제이쿼리' 카테고리의 다른 글
| hover 메뉴 만들기 (0) | 2017.04.13 |
|---|---|
| 자바스크립트,카드 (0) | 2017.04.05 |
| 자바스크립트/ 시작 (0) | 2017.04.03 |
| 제이쿼리-스크롤제어 (0) | 2017.03.27 |
| java script 01 (0) | 2017.03.06 |
ASOG
UI Design, Ux Design