모달창 만들기
첨부파일 https://eond.com/jquery/395394

Preview

https://codepen.io/eond/pen/vpKjRv

JS

//modal-login
$(".ico-spr.profile").on("click",function(){
   $(".modal-login").css('display','block');
   setTimeout(function() {
      $(".modal-login").addClass('open');
   }, 1)
});
//modal-close-area
$("body").click(function(e){
   if($(".modal-login").hasClass("open")){ // site 라는 특정영역이 열려있을 경우
      if(!$(".modal-login").has(e.target).length){ // site에 클릭 이벤트가 발생되어 있는게 없다면 아래 내용을 실행.
         $('.modal-login').removeClass('open');
         setTimeout(function() {
            $(".modal-login").css('display','none');
         }, 50)
      }
   }
})
//modal-close-btn
$(".modal-close").on("click",function(){
   $('.modal-login').removeClass('open');
   setTimeout(function() {
      $(".modal-login").css('display','none');
   }, 50)
});

HTML

<div class="modal-login">
   <div class="modal-box">
      <div class="modal-body text-center">
         <button class="modal-close">닫기</button>
         <h2 class="modal-title">Login</h2>
         내용
      </div>
      <div class="modal-foot">foot</div>
   </div>
</div>

CSS

.modal-login{
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 15px 15px;
    background: rgba(0, 0, 0, 0.6);
     opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
    z-index: 1041;
    padding:400px;
    width:100%;
    height:100%;
}
.modal-box{
    position: relative;
    box-sizing: border-box;
    margin: 0 auto;
    width: 600px;
    max-width: 100%;
    border-radius: 5px;
    background: #fff;
    opacity: 0;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-transition: 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    transition: 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    -webkit-transition-property: opacity, transform;
    transition-property: opacity, transform;
    width:400px;
    background:#fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    /*-webkit-transform: scale(0.8);*/
    /*transform: scale(0.8);*/
    /*margin-top: auto !important;*/
    /*margin-bottom: auto !important;*/
    /*position: relative;*/
    /*box-sizing: border-box;*/
    /*margin: 0 auto;*/
    /*max-width: 100%;*/
    /*opacity: 1;*/
    /*-webkit-transition-property: opacity, transform;*/
    /*transition-property: opacity, transform;*/
    /*-webkit-transition: 0.3s all;*/
    /*transition: 0.3s all;*/
}
.modal-login.open{

    /*display: -ms-flexbox;*/
    /*display: -webkit-flex;*/
    /*display: flex;*/
    opacity:1;
}
.modal-login.open .modal-box{
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);

}
.modal-body{padding:30px}

다른 모달창과 다른점

스르륵 열리면서 살짝 심쿵한다-_-;

CSS에서 원래 사이즈보다 작게 만든 후에 열리면서 -webkit-transform: translateY(0); transform: translateY(0); 본래 사이즈로 돌아감.

기능소개

1. 로그인버튼 클릭하면 스르륵 나타나고
2. 로그인박스 외를 클릭하면 스르륵 닫히고
3. 닫기 버튼 누르면 스르륵 닫히고..

※css는 기초 코드만 소스에 올립니다.

작업하면서 어려웠던 점

1. '스르륵' 열고 닫혀야 한다,

display:none, block 일 경우는 스르륵이 안된다. 

그래서 setTimeout 으로 인터발을 줬다.

2. 특정 영역을 제외하고 닫혀야 한다.

'제이쿼리 특정 영역 제외' 라는 키워드로 검색하면 몇 가지 소스가 있는데..

레이어의 포지션 문제인지 디스플레이 속성 때문인지 몇가지 소스는 적용이 되도, 

그 영역 안에 있는 h2 태그는 제외된다거나, 감싸는 레이어는 적용이 안된다거나 하는 문제가 있었다.


도움 받은 곳 :

1. 특정 영역 제외 클릭시 닫히는 소스 (e.target)

https://m.blog.naver.com/PostView.nhn?blogId=hsoojy_&logNo=220829360497&proxyReferer=https%3A%2F%2Fwww.google.co.kr%2F

2. 닫히는 동작에서 간격 주는 소스 (setTimeout)

http://ooz.co.kr/194

3. 영감을 받은 곳

https://getuikit.com/

http://calvinsnax.xyz/

4. css 중앙정렬

https://webdesign.tutsplus.com/ko/tutorials/the-holy-grail-of-css-centering--cms-22114


추천하는 다른 모달창 소스

1. https://codepen.io/codyhouse/pen/pIrbg?q=modal&limit=all&type=type-pens

2. https://codepen.io/pix3l/pen/ajwcE?q=modal&limit=all&type=type-pens


ps. 다음 부터는 그냥 코드펜에서 가져와야지..

코멘트 0
접기/펴기 | 댓글 새로고침
 
 
Total 142 articles in 2 / 8 pages
번호 제목 제목 날짜날짜
공지 슬라이더 스크립트 4종 2016/07/03 0
공지 jQuery 추천 사이트 2015/06/08 0
121 [슬라이더 플러그인] slick slider 사용방법 2018/08/15 0
120 [기초활용] [jQuery] each, loop, setInterval 활용 파일 2018/05/28 0
119 [팁] 자바스크립트 키코드, 키 이벤트 2018/05/27 0
현재글 [기초활용] 모달창 만들기 2017/12/21 0
117 [기초활용] Modal (모달창) 2018/05/27 0
116 [팁] [jQuery] 페이징 만들기 2015/08/31 0
115 [슬라이더 플러그인] 병풍 스크립트 2018/04/19 0
114 [슬라이더 플러그인] carousel slider 2018/04/17 0
113 [화면전환 스크롤] Delighters : CSS Animations on Page Scroll 2018/04/13 0
112 [기초활용] Add smooth scrolling to page anchors 2018/04/13 0
111 [기타 플러그인] macy.js (masonry 벽돌 레이아웃) 파일 2018/01/15 0
110 [슬라이더 플러그인] Camera Slider jquery 2015/11/15 0
109 [기초활용] jquery popup layer 2017/12/21 0
108 [기초활용] jquery 가나다 정렬 2017/12/20 0
107 [기초활용] [jquery] 폰트 사이즈 조절 버튼 페이지 이동시에 변수 초기화 문제 2017/12/20 0
106 [기초활용] 스크롤 내려오면 멈추는 스크립트 2017/11/16 0
105 $.browser.msie undefined 오류 2017/08/23 0
104 [화면전환 스크롤] 패럴렉스 스크롤링 플러그인 2017/03/31 0
103 [기초활용] 비밀글 jQuery style 찾기 2017/03/31 0

해시태그 디렉터리