投稿日: 2022年7月20日
Modal

jQuery
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Modal</title>

<style>
#modal-overlay {
    display: none;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    background-color: rgba(0, 0, 0, 0.75);
}

#modal-content {
    display: none;
    position: fixed;
    z-index: 2;
    width: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 30px;
    background-color: #fff;
    text-align: center;
}
</style>

</head><body>

<button type="button" id="modal-open">開く</button>

<div id="modal-overlay"></div>

<div id="modal-content">
    <p>モーダルウィンドウ</p>
    <button type="button" id="modal-close">閉じる</button>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<script>
$('#modal-open').on('click', function() {
    $(this).blur();
    $('#modal-overlay, #modal-content').fadeIn(600);
});
$('#modal-overlay, #modal-close').on('click', function() {
    $('#modal-overlay, #modal-content').fadeOut(600);
});
</script>

</body>
</html>