PopUp Window Script

PopUp.js

<!-- Custom HTML Tag for GTM -->
<div id="overlay" style="display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 999;"></div>
<div id="popup" style="display: none; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 300px; padding: 20px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); z-index: 1000; border-radius: 15px;">
    <h2>特別優惠</h2>
    <p>限時優惠，立即購買享受 50% 折扣！</p>
    <div id="button-container" style="text-align: center;">
        <div id="download-btn" style="display: inline-block; margin: 10px; padding: 10px 20px; background: #28a745; color: #fff; text-align: center; cursor: pointer; border-radius: 5px;">下載</div>
        <div id="close-btn" style="display: inline-block; margin: 10px; padding: 5px 10px; background: #007bff; color: #fff; text-align: center; cursor: pointer; border-radius: 5px;">關閉</div>
    </div>
</div>
<script>
    // 顯示彈出視窗和背景遮罩
    document.getElementById('overlay').style.display = 'block';
    document.getElementById('popup').style.display = 'block';

    // 點擊關閉按鈕時隱藏彈出視窗
    document.getElementById('close-btn').onclick = function() {
        document.getElementById('overlay').style.display = 'none';
        document.getElementById('popup').style.display = 'none';
    };

    // 點擊下載按鈕時觸發下載行為
    document.getElementById('download-btn').onclick = function() {
        window.location.href = 'https://example.com/download'; // 替換為實際的下載連結
    };
</script>