레이어 팝업 '닫기' 가 안됩니다

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>A1~A4레이아웃 연습</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header>
            <div class="logo"></div>
            <div class="manu"></div>
        </header>
        <div class="silde">
            <div></div>
        </div>
        <div class="items">
            <div class="news">
                <div class="tab-inner">
                    <div class="btn">
                        <a href="#none" class="active">공지사항</a>
                        <a href="#none">갤러리</a>
                    </div>
                    <div class="tabs">
                        <div class="tab1">
                            <a class="open">SNS 발송 서비스 개선작업<b>2020.01.09</b></a>
                            <a href="#none">휴대폰 인증 서비스 개선 작업<b b>2020.01.07</b></a>
                            <a href="#none">카드사 부분 무이자 할부 이벤트<b>2019.12.31</b></a>
                            <a href="#none">올엣 시스템 작업 안내<b>2019.12.20</b></a>
                            <a href="#none">휴대폰 결제 시스템 작업 안내<b>2019.12.20</b></a>
                        </div>
                        <div class="tab2">
                            <a href="#none"><img src="image/1.jpg" alt="garllery1"></a>
                            <a href="#none"><img src="image/2.jpg" alt="garllery2"></a>
                            <a href="#none"><img src="image/3.jpg" alt="garllery3"></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="banner"></div>
            <div class="nav"></div>
        </div>
        <footer>
            <div class="copy">
                <div class="copy2"></div>
                <div class="copy3"></div>
            </div>
            <div class="logo2"></div>
        </footer>
        <div class="model">
            <div class="model-content">
                <h1>SNS비회원주문하기 종료 안내</h1>
                <p>안녕하세요. JUST 쇼핑몰 MD 홍길동입니다. 안타깝게도 SNS비회원 주문하기 서비스가 한달 뒤 종료될 예정입니다. 회원가입 없이 SNS계정을 이용해 그동안 제품주문을 하실수 있었는데, 금번 강화된 개인정보보호법 시행령 제 9조 (부칙 3조)에 의거, SNS를 이용한 상품 주문/결제등이 근래에 많은 보안잇슈로 문제가 되고 있음에 따라 KISAS의 권고조치의 일환으로 했습니다. 따라서, 한달뒤인 2019.03.10 이후 모든 비회원 고객님들께서는 회원가입으로 전환 후 실명인증이 되어야 하며, 이는 모든 쇼핑몰/오픈마켓등의 전자상거레서비스의 공통된 사함이라는 점을 안내드립니다.
                </p>
                <a class="close-model">X 닫기</a>
            </div>
        </div>
    </div>
    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/costom.js"></script>
</body>
</html>

.container{
    border: 1px solid #111;
    width: 1200px;
    margin: auto;
}
header{
    width: 1200px;
    height: 100px;
    background-color: #222;
}
header div{
    height: 100px;
    
}
.logo{
    width: 170px;
    background-color: #333;
    float: left;
}
.manu{
    width: 700px;
    background-color: #444;
    float: right;
}
.silde{
    height: 300px;
    background-color: #555;
}
.items{
    /* height: 200px; */
    overflow: hidden;
}
.items>div{
    display: inline-block;
    height: 200px;
    float: left;
}
.news{
    width: 400px;
    background-color: #666;
}
.tab-inner{
    margin: 5px 10px;
}
.btn{
    
}
.btn .active{
    background-color: #fff;
}
.btn a{
    width: 100px;
    height: 50px;
    background-color: #888;
    border: 1px solid #000;
    display: inline-block;
    text-align: center;
    color: #111;
    text-decoration: none;
    box-sizing: border-box;
    padding: 13px 0;
    border-radius: 5px 5px 0 0;
    margin-left: -5px;
    border-bottom: none;
    cursor: pointer;
}
.tabs{
    background-color: #fff;
    height: 145px;
    border: 1px solid #000;
    margin-left: -5px;
    margin-top: -1px;
    
    
}
.tab1 a.open{
    cursor: pointer;
}
.tab1 a{
    color: #000;
    text-decoration: none;
    box-sizing: border-box;
    border-bottom: 1px solid #000;
    display: block;
    margin: 3px;
}
.tab1 a:last-child{
    border-bottom: none;
}
.tab1 a b{
    float: right;
    font-weight: normal;
}
.tab2{
    display: none;
}
.tab2 a{
    box-sizing: border-box;
    display: inline-block;
    padding: 17px 0;
    margin-left: 10px
}
.tab2 img{
    width: 110px;
}

.banner{
    width: 400px;
    background-color: #777;
}
.nav{
    width: 400px;
    height: 200px;
    background-color: #888;
}
footer{
    height: 100px;
    background-color: #999;
}
footer> div{
    float: left;
    height: 100px;
}
.copy{
    width: 1030px;
}
.copy> div{
    width: 1030px;
    height: 50px;
}
.copy2{
    background-color: #444;
}
.copy3{
    background-color: #777;
}
.logo2{
    width: 170px;
    background-color: #222;
}
.model{
    position: absolute;
    left: 0;
    top: 0;
    background-color: #00000028;
    width: 1200px;
    height: 700px;
    margin: 7px;
    display:block;
    display: none;
}
.model-content{
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: #fff;
    width: 500px;
    height: 400px;
    border: 1px solid #000;
    transform: translate(-50%,-50%);
    box-sizing: border-box;
}
.model-content h1{
    color: #fff;
    background-color: #000;
    width: 450px;
    display: inline-block;
    text-align: center;
    margin: 25px;
}
.model-content p{
    line-height: 26px;
    text-shadow: 0 0 3px #0000003d;
    text-align: center;
}
.close-model{
    background-color: #000;
    width: 90px;
    height: 40px;
    display: inline-block;
    float: right;
    color: #fff;
    text-align: center;
    box-sizing: border-box;
    margin: 12px;
    padding: 6px;
    cursor: pointer;
}

$('.btn a:first-child').click(function(){
    $('.tab1').show()
    $('.tab2').hide()
    $(this).addClass('active')
    $(this).siblings().removeClass('active')
})
$('.btn a:last-child').click(function(){
    $('.tab2').show()
    $('.tab1').hide()
    $(this).addClass('active')
    $(this).siblings().removeClass('active')
})
$('.open').click (function(){
    $('.model').fadeIn()
})
$('.close-model').click (function(){
    $('.mode1').fadeOut()
})

코드를 보내드립니다

인프런 커뮤니티 질문&답변