【jQuery】クリックしたら要素が表示されるモーダルウィンドウ

<div class="content">
<a class="modal_open" href="" data-target="modal01">MODAL01</a><br>
<a class="modal_open" href="" data-target="modal02">MODAL02</a>
</div>
<div id="modal01" class="modal">
<div class="modal_wrapper">
<div class="modal_content">
<a class="modal_close close_btn" href="">×</a>
<p>MODAL01</p>
<p>MODAL01</p>
</div>
</div>
</div>
<div id="modal02" class="modal">
<div class="modal_wrapper modal_close">
</div>
<div class="modal_content">
<a class="modal_close close_btn" href="">×</a>
<p>MODAL02</p>
<p>コチラは黒い背景部分をクリックでもモーダルが閉じます</p>
</div>
</div>

.content{
margin: 0 auto;
padding: 40px;
}
.modal{
display: none;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 100%;
}
.modal_wrapper{
background: rgba(0,0,0,0.8);
height: 100vh;
position: absolute;
width: 100%;
}
.modal_content{
background: #fff;
left: 50%;
padding: 40px;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
width: 60%;
}
.close_btn{
background: #c3c3c3;
border-radius: 50%;
color: #fff;
display: block;
height: 20px;
right: 10px;
top: 10px;
line-height: 20px;
text-align: center;
position: absolute;
width: 20px;
}

$(function(){
$('.modal_open').each(function(){
$(this).on('click',function(){
var target = $(this).data('target');
var modal = document.getElementById(target);
$(modal).fadeIn();
return false;
});
});
$('.modal_close').on('click',function(){
$('.modal').fadeOut();
return false;
});
});