JSFiddle - React, Tailwind, and code Playground

by mejileben

HTML

<div class="mod-modalOverlay is-hide">
    <div class="mod-recommendModal">
<!-- モーダルの中身 -->
        <span class="mod-content">hogehogehogehogehogehoge</span>
    </div>
</div>

<button id="prg-showModal">
Push
</button>

CSS

.is-hide {
	display: none;
}

.mod-modalOverlay {
	z-index: 150;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
}

.mod-recommendModal {
	position: absolute;
	top: 20%;
	left: 5%;
	width: 90%;
	box-sizing: border-box;
	background: #f5f5f5;
	border-radius: 10px;
}

.mod-content {
  display: block;
  padding: 100px 10px;
  text-align: center;
}

JavaScript

$('.mod-modalOverlay').on('click', _ => {
	if ($(event.currentTarget) != $('.mod-modalOverlay')) {
        // return;
    }
    $('.mod-modalOverlay').addClass('is-hide');
})

$('#prg-showModal').on('click', event => {

	$('.mod-modalOverlay').removeClass('is-hide');
})

// ここのコメントを取ったら、中身クリックでは閉じなくなる
/* $('#prg-recommendModal').on('click' , event => {
  event.stopPropagation();
}) */