Вот вариант.
Закрывается при клике вне области модульного окна.
Можно создавать сколько угодно модульных окон.
Пример:
https://codepen.io/Fix0_o/pen/wRRVpW<a modal-win='modal_1' href='#'>Click me</a>
<a modal-win='modal_2' href='#'>Click me</a>
<div class='modal_bg'>
<div class='flex'>
<div class='modal_win modal_1'>Modal window 1</div>
<div class='modal_win modal_2'>Modal window 2</div>
</div>
</div>
.modal_bg {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background: #000;
display: none;
}
.flex {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex-wrap: wrap;
height:100%;
}
.modal_win {
display: block;
min-width: 300px;
min-height: 300px;
background: #fff;
text-align: center;
display: none;
}
$(document).on('click', "[modal-win]", function(event){
event.preventDefault();
var target = event.target;
var acbut = $(target).attr('modal-win');
$('.'+acbut).fadeIn(600);
$('.modal_bg').fadeIn(600);
});
$(document).on('click', ".modal_bg", function(event){
event.preventDefault();
event.stopPropagation();
var target = event.target;
var check = $(target).attr('class');
if(check == 'flex'){
$(this).fadeOut(600);
$('.modal_win').each(function (index, element) {
$(element).fadeOut(600);
});
}
});
Простой