Cacher is the code snippet organizer for pro developers

.modal-trigger {
	display: block;
	text-decoration: none;
	&:hover {
		text-decoration: none;
	}
}
.modal {
	position: fixed;
	top: 0;
	left: 0;
	padding: 20px;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .7);
	opacity: 0;
	z-index: 10;
}
.modal-inner {
	width: 100%;
	padding: 20px;
	background-color: $white;
	border-radius: 6px;
}
.modal-close {
	position: absolute;
	top: 30px;
	right: 30px;
}
.modal-close {
	span {
		display: block;
		position: relative;
		width: 40px;
		height: 40px;
		line-height: 40px;
		text-decoration: none;
		cursor: pointer;
		&:before,
		&:after {
			position: absolute;
			top: 18px;
			left: 5px;
			height: 2px;
			width: 30px;
			background-color: #a7a7a7;
			content: '';
		}
		&:before {
			transform: rotate(45deg);
		}
		&:after {
			transform: rotate(-45deg);
		}
		&:hover:before,
		&:hover:after {
			background-color: #ccc;
		}
	}
}

export default class Modal {
	constructor() {
		this.$target = $('.js-modal');
		this.$trigger = $('.js-modal-trigger');
		this.$close = this.$target.find('.js-modal-close');
	}
	init() {
		this.bindEvent();
	}
	bindEvent() {
		this.$trigger.on('click', ()=> {this.show()});
		this.$target.on('click', ()=> {this.close()});
		this.$close.on('click', ()=> {this.close()});
	}
	show() {
		this.$target.removeClass('dn').animate({'opacity': '1'});
	}
	close() {
		let _self = this;
		this.$target.animate({'opacity': '0'}, function() {
			_self.$target.addClass('dn');
		});
	}
}

let modal = new Modal();
modal.init();

<div class="btn btn-black js-modal-trigger">
  <div class="btn-txt">応募詳細はコチラ</div>
</div>

<div class="modal js-modal dn">
    <div class="modal-inner">
        あああ
    </div>
    <div class="modal-close"><span class="js-modal-close"></span></div>
</div>