테스트 사이트 - 개발 중인 베타 버전입니다

스크립트 열고 닫기 번호 추가방법에 대해서...

wnsah6288 1년 전 조회 8,450

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

 

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

 

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>

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

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

$(this).parent().addClass('modal-open');

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

w
wnsah6288
1년 전
주신코드로 하면 안열립니다. ㅠㅜ
쟁반짜장
1년 전
http://exam.dothome.co.kr/temp/wrid_526167.html
참고로 구분을 위해 1, 2 숫자를 추가한 것 외에는 따로 추가한 코드는 없습니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인