JSFiddle - React, Tailwind, and code Playground

by mejileben

HTML

<div class="mod-modalOverlay is-hide" id="prg-modalOverlay">
    <div class="mod-recommendModal" id="prg-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

$('#prg-modalOverlay').on('click', (event) => {
  $('#prg-modalOverlay').addClass('is-hide');
})

$('#prg-showModal').on('click', () => {
	$('#prg-modalOverlay').removeClass('is-hide');
})

$