Woocommerce : add a text pop up on add to cart conditionally

Question

I'm new at PHP and Woocommerce and I'm trying to add a pop up containing HTML when a client adds a product in the cart conditionally, here's what I've tried so far :

add_action('wp_footer','custom_jquery_add_to_cart_script');
function custom_jquery_add_to_cart_script(){
    if ( is_product() ):
        ?>
        <script type="text/javascript">
            // Ready state
            (function($){
                $(document.body).on("added_to_cart", function (event, fragments, cart_hash, $button) {
                    var myRadio = $("input[name=payment_type]");
                    var checkedValue = myRadio.filter(":checked").val();
                    if(checkedValue == "deposit")
                    {
                        
                        alert("Alert !");
                    }
                });

            })(jQuery); // "jQuery" Working with WP (added the $ alias as argument)
        </script>
    <?php
    endif;
}

It works very well with an alert, but I would like to add html content instead and I'm unsure of how to do that with PHP, JS and Jquery ... I'm new to the WordPress workflow in general

Here's another syntax I tried :

add_action('wp_footer','custom_jquery_add_to_cart_script');
function custom_jquery_add_to_cart_script(){
    if ( is_product() ):
        ?>
        <script type="text/javascript">
            // Ready state
            (function($){
                $(document.body).on("added_to_cart", function () {
                    var myRadio = $("input[name=payment_type]");
                    var checkedValue = myRadio.filter(":checked").val();
                    if(checkedValue == "deposit")
                    {
                        $('#myModal').modal('show');
                    }
                });

            })(jQuery); // "jQuery" Working with WP (added the $ alias as argument)
        </script>
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Edit Data</h4>
                    </div>
                    <div class="modal-body">
                        <div class="fetched-data"><?php $message ?></div> 
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        <?php
    endif;
}

But unfortunatelt it just keeps loading, nothing happens after the "Add to cart" action.

Thank you for your help !