아래에 있는 코드를 추가하려고 하는데요

 

문제는 한개만 열리고 이걸 추가하려고 하려면 어떻게 해야될까요..

 

1번창 열고 닫고 2번창 열고 닫고 3번창 열고 닫고 하려면....

 

-------------------------------------------------------------------------

<div class="container">

    <a class="btn js-click-modal">Open Modal</a>

    <div class="modal">

      <div class="header">

        This is a full-width modal with a title

      </div>

      <div class="body"><p>And here is all its contents.</p>

        <a class="btn js-close-modal">Close</a>

      </div>

    </div>

</div>

 

<!-- 하나 더 넣어서 추가하려면... -->

<div class="container">

    <a class="btn js-click-modal">Open Modal</a>

    <div class="modal">

      <div class="header">

        This is a full-width modal with a title

      </div>

      <div class="body"><p>And here is all its contents.</p>

        <a class="btn js-close-modal">Close</a>

      </div>

    </div>

</div>

<!-- 하나 더 넣어서 추가하려면... -->

 

 

<style>

  .container > .btn {

    margin: 60px;

    padding: 20px 40px;

    font-size: 30px;

    border-radius: 40px;

  }

  .modal {

    background: #fff;

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

    transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);

    top: 100%;

    position: fixed;

    left: 0;

    text-align: left;

    .header {

      padding:20px;

      border-bottom: 1px solid #ddd;

      font: 300 24px Lato;

      position: relative;

      }

    .body {

      padding: 20px;

      font: 300 16px Lato;

    }

  }

 

  .btn {

     background: linear-gradient(to right, rgb(220, 227, 91), rgb(69, 182, 73));

    padding: 10px 25px;

    display: inline-block;

    border-radius: 25px;

    margin: 20px 0;

    color: #fff;

    position: relative;

    transition: all .4s ease;

    cursor: pointer;

    &:hover {

      box-shadow: 0 3px 15px rgba(0,0,0,0.2);

    }

  }

 

  .container.modal-open .modal {

    top: 0;

  }

 

</style>

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>

    $('.js-click-modal').click(function(){

        $('.container').addClass('modal-open');

      });

     

      $('.js-close-modal').click(function(){

        $('.container').removeClass('modal-open');

      });

</script>