popup-detail.md

ポップアップを実装するPHPコード

 <?php

<script>
    const $button = document.querySelector('.btn')
    const $cover = document.querySelector('.cover')
    const $popup = document.querySelector('.popup')
    const $close = document.querySelector('.close__btn')

    const $doms = [$popup, $cover, $close]


    $button.addEventListener('click', () => {
        $doms.forEach(dom => {
            dom.classList.toggle('popup__open')
        })
        // dataの取得
        const parentTaskId = $button.dataset.parent_task_id

        const parentTaskName = document.querySelector('.parent__task')
        <?php
            $parentTaskId = '<script>document.write(parentTaskId)</script>';

            $parent_tasks = array_values(array_filter($parent_tasks, function($parent_task) {
                return $parent_task->id === 1;
            }));
         ?>
        parentTaskName.textContent = JSON.parse('<?php echo json_encode($parent_tasks[0]->title);?>')
    })

    $doms.forEach(dom => {
        if(dom === $popup) return
        dom.addEventListener('click', () => {
            $doms.forEach(dom => {
                dom.classList.remove('popup__open')
            })
        })
    })
</script>