스크립트 열고 닫기 번호 추가방법에 대해서...
본문
아래에 있는 코드를 추가하려고 하는데요
문제는 한개만 열리고 이걸 추가하려고 하려면 어떻게 해야될까요..
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>