본문 바로가기
Web/JAVASCRIPT

모달창만들기와 간단한 애니메이션

by print_soo 2023. 7. 15.

모달창 만들기

모달창 만들기는 동적 UI 만들기와 같이 UI를 미리 만들어놓고 특성 상황에서 UI가 노출되면 된다.

 

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="main.css">

    <title>Hello, world!</title>
  </head>
  <body>

    <!------------------------------------------------------------------>
    <!-- modal -->
    <div class="black-bg">
        <div class="white-bg">
            <h4>로그인하세요</h4>
            <button class="btn btn-danger" id="close">닫기</button>
        </div>
    </div>
    <!------------------------------------------------------------------>

    <!-- navbar -->
    <nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
          <span class="navbar-brand">Navbar</span>
          <button class="navbar-toggler" type="button">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
      </nav>

    <!-- navbar items -->
    <ul class="list-group"> <!-- 띄워쓰기로 class 이름을 동시에 두개 만들었다.  -->
        <li class="list-group-item">An item</li>
        <li class="list-group-item">A second item</li>
        <li class="list-group-item">A third item</li>
        <li class="list-group-item">A fourth item</li>
        <li class="list-group-item">And a fifth one</li>
    </ul>

    <button id="login">로그인</button>

    

    <!-- JavaScript -->

    <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>


    <script>

        // 모달창 노출
        $('#login').on('click', function(){
            $('.black-bg').addClass('show-modal');
        })

        // 모달창 닫기
        $('#close').on('click', function(){
            $('.black-bg').removeClass('show-modal');
        })

        document.querySelector('.navbar-toggler').addEventListener('click', function(){
            document.querySelectorAll('.list-group')[0].classList.toggle('show');
        }) 


    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
    </script>
    
  </body>
</html>

 

 

.list-group {
    display: none;
}

.show {
    display: block;
}

.black-bg {
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    z-index: 5;
    padding: 30px;
    display: none;
}

.show-modal{
    display: block;
}

.white-bg {
    background: white;
    border-radius: 5px;
    padding: 30px;
}

 

모달창

 

모달창에 애니메이션 주기

 

...

<script>

        // 모달창 노출
        $('#login').on('click', function(){
            $('.black-bg').fadeIn(); //페이드 인
        })

        // 모달창 닫기
        $('#close').on('click', function(){
            $('.black-bg').fadeOut(); //페이드 아웃
        })

        document.querySelector('.navbar-toggler').addEventListener('click', function(){
            document.querySelectorAll('.list-group')[0].classList.toggle('show');
        }) 


    </script>

...

 

위의 코드와 같이 fadein, fadeout으로 애니메이션 효과를 줄 수 있다. 하지만 위의 방법으로 하면 JS에 많은 일을 주기 때문에 성능이 저하될 수 있다. 따라서 애니메이션은 최대한 CSS로 처리하는 것이 좋다.

 

🚩 애니메이션을 만드는 법칙 🚩

[one way(A에서 B로)]

1. 애니메이션의 시작 전(시작) 스타일을 만든다. (스타일을 하나의 요소에 class 두개를 부여하고 css로 설정한다.)
=> 애니메이션을 사용하기 위해서는 display: none이 아니라 visibility: hidden을 사용한다.

2. 애니메이션의 끝난 후(최종) 스타일을 만든다.
=> 애니메이션을 사용하기 위해서는 display: block이 아니라 visibility: visible을 사용한다.

3. 원할 때 최종 스타일로 변하라고 코드를 짠다.

4. 시작 스타일에 transition을 추가한다.

 

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="main.css">

    <title>Hello, world!</title>
  </head>
  <body>

    <!------------------------------------------------------------------>
    <!-- modal -->
    <div class="black-bg">
        <div class="white-bg">
            <h4>로그인하세요</h4>
            <button class="btn btn-danger" id="close">닫기</button>
        </div>
    </div>
    <!------------------------------------------------------------------>

    <button id="login">로그인</button>

    

    <!-- JavaScript -->

    <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>


    <script>

        /* STEP 3 */
        // 모달창 노출
        $('#login').on('click', function(){
            $('.black-bg').addClass('show-modal');
        })

        // 모달창 닫기
        $('#close').on('click', function(){
            $('.black-bg').removeClass('show-modal');
        })

    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
    </script>
    
  </body>
</html>

 

.black-bg {
    /* STEP 1 */
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    z-index: 5;
    padding: 30px;
    visibility: hidden;
    opacity: 0;

    /* STEP 4 */
    transition: all 1s;
}

.show-modal{
    /* STEP 2 */
    visibility: visible;
    opacity: 1;
}

.white-bg {
    background: white;
    border-radius: 5px;
    padding: 30px;
}
저작자표시 비영리

'Web > JAVASCRIPT' 카테고리의 다른 글

코딩애플) if/else, function 실력향상 과제  (0) 2023.07.17
폼 만들기(if else)  (0) 2023.07.15
jQuery  (0) 2023.07.13
이벤트 리스너  (0) 2023.07.13
서브메뉴 만들어보기와 classList 다루기  (1) 2023.07.12

관련글

티스토리툴바