모달창 만들기

2017년 12월 21일

Preview

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

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

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

홈페이지 제작팁