WEB 웹팁 디자인팁 폰트 컬러 UI/UX 모바일UI Widget 디자인소스 기획팁 웹서비스 회사복지 스타트업 회사후기 메모/서식 퍼블팁 추천사이트 HTML•CSS 자바스크립트 jQuery React 앵귤러JS Node.js Codepen 개발팁 PHP 한글코딩 인터뷰 안드로이드 오픈API 파이썬 Flutter 서버관리팁

모달창 만들기

2017년 12월 21일

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}