WooCommerce Checkout Popup Modal Based on Postcode https://wpsites.net/wordpress-tutorials/checkout-page-popup-modal-based-on-billing-zip-code-for-woocommerce/

Woo-Checkout-Popup-Modal.php

function enqueue_modal_popup_script_on_checkout() {
    if (is_checkout()) {
        // Enqueue jQuery (if it's not already loaded)
        wp_enqueue_script('jquery');
        ?>
        <style type="text/css">
            /* Modal Styling */
            .modal {
                display: none; /* Hidden by default */
                position: fixed;
                z-index: 1; /* Sit on top */
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                overflow: auto;
                background-color: rgb(0,0,0); /* Fallback color */
                background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
            }

            /* Modal Content */
            .modal-content {
                background-color: #fefefe;
                margin: 15% auto;
                padding: 20px;
                border: 1px solid #888;
                width: 80%;
                max-width: 500px;
            }

            /* The Close Button */
            .close {
                color: #aaa;
                float: right;
                font-size: 28px;
                font-weight: bold;
            }

            .close:hover,
            .close:focus {
                color: black;
                text-decoration: none;
                cursor: pointer;
            }
        </style>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                var modal = $('#postcodeModal');
                var span = $('.close');
                
                $('#billing_postcode').on('blur', function() {
                    var postcode = $(this).val();
                    if (postcode === '12000') {
                        modal.show();
                    }
                });

                span.on('click', function() {
                    modal.hide();
                });

                $(window).on('click', function(event) {
                    if ($(event.target).is(modal)) {
                        modal.hide();
                    }
                });

                $('#closeModal').on('click', function() {
                    modal.hide();
                });
            });
        </script>
        <?php

        // Output modal HTML
        ?>
        <!-- Modal HTML -->
        <div id="postcodeModal" class="modal" style="display:none;">
            <div class="modal-content">
                <span class="close">&times;</span>
                <h2>Special Offer for Your Postcode!</h2>
                <p>We've got a special deal for customers from postcode 12000. Check it out now!</p>
                <button id="closeModal">Close</button>
            </div>
        </div>

        <!-- Form with Postcode Input -->
        <p class="form-row address-field validate-required validate-postcode form-row-wide woocommerce-validated" id="billing_postcode_field" data-priority="90" data-o_class="form-row form-row-wide address-field validate-required validate-postcode">
            <label for="billing_postcode" class="">ZIP Code&nbsp;<abbr class="required" title="required">*</abbr></label>
            <span class="woocommerce-input-wrapper">
                <input type="text" class="input-text" name="billing_postcode" id="billing_postcode" placeholder="" value="90210" aria-required="true" autocomplete="postal-code">
            </span>
        </p>
        <?php
    }
}
add_action('wp_footer', 'enqueue_modal_popup_script_on_checkout');