JavaScriptのgetBoundingClientRect();でカードをクリックしたらカードからモーダルを拡大縮小して表示

var rect = currentCard.getBoundingClientRect();

<ul class="link-card_block">
<li class="link-card" data-title="Article Title 1" data-summary="Summary of article 1..." data-link="https://example.com/page-1" data-image="https://dubdesign.net/wp-content/uploads/2024/03/keihi-520x300.jpg">
    <img src="https://dubdesign.net/wp-content/uploads/2024/03/keihi-520x300.jpg" alt="Thumbnail 1">
    <div class="link-card_text"><p>Article Title 1</p></div>
</li>
<li class="link-card" data-title="Article Title 2" data-summary="インハウスでDTP・WEBデザイン、マークアップ、SEO対策、サイト構築と広めにやっています。最近はプロダクトデザインの仕事がメインです。" data-link="https://example.com/page-2" data-image="https://dubdesign.net/wp-content/uploads/2024/03/keihi-520x300.jpg">
    <img src="https://dubdesign.net/wp-content/uploads/2024/03/keihi-520x300.jpg" alt="Thumbnail 2">
    <div class="link-card_text"><p>Article Title 2</p></div>
</li>
<li class="link-card" data-title="Article Title 3" data-summary="Summary of article 3..." data-link="https://example.com/page-2" data-image="https://dubdesign.net/wp-content/uploads/2024/03/keihi-520x300.jpg">
    <img src="https://dubdesign.net/wp-content/uploads/2024/03/keihi-520x300.jpg" alt="Thumbnail 3">
    <div class="link-card_text"><p>Article Title 3</p></div>
</li>
<li class="link-card" data-title="Article Title 4" data-summary="Summary of article 4..." data-link="https://example.com/page-2" data-image="https://dubdesign.net/wp-content/uploads/2024/03/keihi-520x300.jpg">
    <img src="https://dubdesign.net/wp-content/uploads/2024/03/keihi-520x300.jpg" alt="Thumbnail 4">
    <div class="link-card_text"><p>Article Title 4</p></div>
</li>
<!-- Repeat for other cards -->

<!-- Modal Structure -->
<div id="modal" class="modal">
    <div id="modal-content" class="modal-content">
        <span id="modal-close" class="close">×</span>
        <div class="modal-contentInnerTop"><img id="modal-image" src="" alt="Selected Thumbnail">
        <p id="modal-title"></p>
        <p id="modal-summary"></p></div>
        <div class="modal-contentInnerBottom"><a id="modal-link" href="#">続きを見る</a></div>
    </div>
    <div id="modal-overlay" class="modal-overlay"></div>
</div></ul>

document.addEventListener('DOMContentLoaded', function () {
    // ページの読み込みが完了したら実行
    var cards = document.querySelectorAll('.link-card'); // '.link-card'クラスを持つ要素をすべて選択
    var modal = document.getElementById('modal'); // モーダルの要素を取得
    var modalContent = document.getElementById('modal-content'); // モーダルのコンテンツ部分を取得
    var closeModal = document.getElementById('modal-close'); // モーダルを閉じるボタンを取得
    var overlay = document.getElementById('modal-overlay'); // モーダルの背景部分を取得

    var initialRect = null; // クリックされたカードの初期位置とサイズを保存する変数

    cards.forEach(function(card) {
        // 各カードにクリックイベントを設定
        card.addEventListener('click', function() {
            currentCard = card; // 現在クリックされたカードを更新
            initialRect = currentCard.getBoundingClientRect(); // カードの現在の位置とサイズを取得

            // データ属性に基づいて画像、タイトル、サマリー、リンクを設定
            document.getElementById('modal-image').src = currentCard.getAttribute('data-image');
            document.getElementById('modal-title').textContent = currentCard.getAttribute('data-title');
            document.getElementById('modal-summary').textContent = currentCard.getAttribute('data-summary');
            document.getElementById('modal-link').href = currentCard.getAttribute('data-link');

            // モーダルコンテンツの初期位置とサイズをカードに合わせて設定
            modalContent.style.position = 'fixed';
            modalContent.style.width = initialRect.width + 'px';
            modalContent.style.height = initialRect.height + 'px';
            modalContent.style.top = initialRect.top + 'px';
            modalContent.style.left = initialRect.left + 'px';
            modalContent.style.transform = 'translate(0, 0) scale(1)';
            modalContent.style.opacity = 1;

            // モーダルとオーバーレイを表示
            modal.style.display = 'flex';
            overlay.style.display = 'block';
            overlay.style.opacity = 1;

            setTimeout(function() {
                // モーダルの位置とサイズをビューポートの中心にアニメーションで移動
                modalContent.style.transition = 'transform 0.5s ease-in-out, top 0.5s ease-in-out, left 0.5s ease-in-out, width 0.5s ease-in-out, height 0.5s ease-in-out, opacity 0.5s ease-in-out';
                modalContent.style.width = '80%'; // 目標のサイズに変更
                modalContent.style.height = 'fit-content'; // 高さを内容に合わせる
                modalContent.style.top = '50%'; // 垂直中央に
                modalContent.style.left = '50%'; // 水平中央に
                modalContent.style.transform = 'translate(-50%, -50%) scale(1)';
            }, 10);
        });
    });

    function closeHandler() {
        // モーダルを閉じる際のアニメーション
        modalContent.style.transition = 'transform 0.5s ease-in-out, top 0.5s ease-in-out, left 0.5s ease-in-out, width 0.5s ease-in-out, height 0.5s ease-in-out, opacity 0.5s ease-in-out';
        modalContent.style.width = initialRect.width + 'px';
        modalContent.style.height = initialRect.height + 'px';
        modalContent.style.top = initialRect.top + 'px';
        modalContent.style.left = initialRect.left + 'px';
        modalContent.style.transform = 'translate(0, 0) scale(0)';
        modalContent.style.opacity = 0;

        setTimeout(function() {
            // モーダルとオーバーレイを非表示に
            modal.style.display = 'none';
            overlay.style.display = 'none';
            modalContent.style.transition = 'none';
            modalContent.style.transform = 'translate(-50%, -50%) scale(1)';
            modalContent.style.opacity = 1;
        }, 500);
    }

    closeModal.addEventListener('click', closeHandler); // 閉じるボタンのイベントリスナー
    overlay.addEventListener('click', closeHandler); // オーバーレイをクリックしたときも閉じる
});

ul.link-card_block {
    display: flex;
    justify-content: flex-start;
    gap: 40px;
    flex-wrap: wrap;
}
.link-card {
    background: #fff;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.12), 0 2px 3px 0 rgba(0, 0, 0, 0.22);
    cursor: pointer;
    transition: 0.2s ease-in-out;
    width: 45%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
}
.link-card:hover {
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.15), 0 0 5px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}
.link-card img {
    width: 100%;
}
.link-card_text {
    padding: 12px 16px;
}
.link-card_text p {
    padding: 0;
    margin: 0;
    font-weight: 600;
    color: #313131;
}

.modal {
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    z-index: 1050; 
    overflow: hidden; 
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); 
    opacity: 0;
    transition: opacity 0.5s ease; 
    z-index:9;
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0); 
    width: 80%; 
    max-width: 600px; 
    height: auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
    transition: transform 0.5s ease; 
    z-index: 10; 
    display: flex;
    flex-direction: column;
   max-height: 80%;
   gap: 15px;
}
#modal-image {
    width: 100%;
}
.close {
    position: absolute;
    top: -11px;
    right: -11px;
    cursor: pointer;
    font-size: 1.3em;
    color: #555;
    z-index: 20;
    display: flex;
    background: #f9f9f9;
    width: 38px;
    height: 38px;
    justify-content: center;
    align-items: center;
    border-radius: 9999px;
    border: solid 1px #ddd;
    transition: 0.3s ease-in-out;
    line-height: 1;
    padding: 0;
}
.close:hover {
    opacity: 0.8;
}
.modal-contentInnerTop {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    gap: 8px;
}
.modal-contentInnerTop p {
    margin: 0;
    padding-left: 20px;
    padding-right: 20px;
}
.modal-contentInnerBottom {
    display: flex;
    justify-content: center;
    padding: 12px 0;
    background: #f9f9f9;
    border-radius: 0 0 8px 8px;
}
#modal-link {
    background: #fff;
    color: #6bb6ff;
    width: 240px;
    display: flex;
    justify-content: center;
    padding: 7px 0 5px;
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none;
    border: solid 1px #6bb6ff;
    position: relative;
}
#modal-link:after {
    right: 14px;
    opacity: 0.6;
    font-family: "Font Awesome 5 Free";
    content: "\f105";
    font-weight: 900;
    position: absolute;
}
#modal-link:hover {
    background: #6bb6ff;
    color: #fff;
    opacity: 0.8;
}
#modal-title {
    font-weight: 600;
    font-size: 1.2rem;
    color: #313131;
}
#modal-summary {
    color: #707070;
    font-size: 0.9rem;
}