kokjan/frontend/views/site/_popup.php

<?php

use common\models\CmsPost;
use yii\helpers\Html;
use yii\helpers\StringHelper;
use yii\helpers\Url;

$this->registerCssFile(Yii::getAlias('@web') . '/css/popup2.css');
//$this->registerJsFile("@web/js/popup.js");
?>

<!-- Popup -->
<div class="overlay" id="popupOverlay"></div>
<div class="popup" id="myPopup">
    <button class="close-btn" id="closePopup">&times;</button>
    <a href="https://kokjan.go.th/post/view?id=860"><img src="https://backend.kokjan.go.th/uploads/files/1/534751.jpg" alt="Popup Image" class="popup-image"></a>
</div>

<script>
    // เมื่อหน้าเว็บโหลดเสร็จ
    window.onload = function() {
        // แสดง popup และ overlay
        document.getElementById('myPopup').style.display = 'block';
        document.getElementById('popupOverlay').style.display = 'block';

        // ป้องกันการ scroll หน้าเว็บเมื่อ popup เปิด
        document.body.style.overflow = 'hidden';
    };

    // ปุ่มปิด popup
    document.getElementById('closePopup').onclick = function() {
        closePopup();
    };

    // คลิกที่ overlay เพื่อปิด popup
    document.getElementById('popupOverlay').onclick = function() {
        closePopup();
    };

    // ฟังก์ชันปิด popup
    function closePopup() {
        document.getElementById('myPopup').style.display = 'none';
        document.getElementById('popupOverlay').style.display = 'none';
        document.body.style.overflow = 'auto'; // อนุญาตให้ scroll หน้าเว็บได้อีกครั้ง
    }

    // ปิด popup เมื่อกดปุ่ม Escape
    document.addEventListener('keydown', function(event) {
        if (event.key === 'Escape') {
            closePopup();
        }
    });
</script>