728x90
300x250
버튼을 클릭하면 풀스크린 모핑 팝업창이 뜨는 스크립트
데모
https://codyhouse.co/demo/morphing-modal-window/index.html#0
다운
https://github.com/CodyHouse/morphing-modal-window
호환성 ie9+ Chrome+ Firefox+ Sapari+ Opera+
참고 transition transform Velocity.js
github에서 다운 받은 파일들을 각 위치에 맞게 넣어준다.
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 | <head> <link rel="stylesheet" href="css/reset.css"> <!-- CSS reset --> <link rel="stylesheet" href="css/style.css"> <!-- Resource style --> <script src="js/modernizr.js"></script> <!-- Modernizr --> </head> <body> <section class="cd-section" > <!-- 레이어영역 --> <div class="cd-modal-content"> <p> Lorem ipsum dolor sit amet, </div> <!-- cd-modal-content --> </div> <!-- cd-modal --> <a href="#0" class="cd-modal-close">close</a> <!--// 레이어 영역 --> <div class="cd-modal-action"> <a href="#0" class="btn" data-type="modal-trigger">Fire Modal Window</a> <span class="cd-modal-bg"></span> </div> <!-- cd-modal-action --> </section> <script src="js/jquery-2.1.1.js"></script> <script src="js/velocity.min.js"></script> <script src="js/main.js"></script> <!-- Resource jQuery --> </body> | cs |
그리고 이런식으로 코딩해주면 된다.
그러나나는 썸네일 용이기 때문에
썸네일에 a태그로 감싸줬다.
원래 버튼 형식이고 버튼이 커지면서 배경으로 변하는 형태이다.
그래서 기존에는 버튼 배경 부분이 같은 css로 되어있는데 이것을 분리해서 작성했다.
그리고 css 조절
z-index 값을 높여줘야 다른 것보다 상위에 나온다.
그런데 문제는 여러개의 썸네일을 클릭해야 하는데 버튼이 하나라는것
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <script> $(function() { $(".btn").click(function() { $('header').css('position', 'unset'); }); $(".cards:nth-child(1) .btn").click(function() { $("p").html("<span class='red'> 22222222222 " + "<b>HTML 콘텐츠 변경하기</b></span>"); }); $(".cards:nth-child(2) .btn").click(function() { $("p").html("<span class='red'> 22222222222 " + "<b>HTML 콘텐츠 변경하기</b></span>"); }); $(".cd-modal-close").click(function() { $('header').css('position', 'fixed'); }); }); </script> | cs |
그래서 스크립트를 추가했다.
버튼 클릭시 해당 순서에 버튼을 클리갛면 내용이 변경되는 것이다.
상단 탑메뉴가 고정 되어있어서 풀스크린 모핑 팝업창 위로 나오기 때문에
버튼 클릭 순간 픽스 되어있는 헤더를 unset 해주고
닫기 누르는 순간 다시 fixed로 돌아가게 설정해 주었다.
뭔가 더 간단하게 표현할 수 있을것 같지만 ..
오늘은 여기까지 마무리하고 차차 알아봐야겠다.
728x90
반응형
'javaScript > JS Examples' 카테고리의 다른 글
| 자바스크립트::동의를 누르지 않으면 경고창 띄우기 (0) | 2019.01.17 |
|---|---|
| 인덱스에서 다른페이지 바로가기 연결 (location) (0) | 2018.12.18 |
| 스크롤하면 해당 메뉴에 클래스 붙여서 효과주기 (0) | 2018.12.07 |
| 부드러운 페이지 스크롤 적용하기 smooth scroll :: 제이쿼리 (1) | 2018.12.06 |
| 제이쿼리 :: height값 구하기 하고 높이 값에 따른 메뉴바 변 (0) | 2018.12.04 |
댓글