Echo Extra Shortcode HTML to wp_foot

Usually, you don’t need to place the modal code in the bottom of the website.
So you can just write it directly before or after your toggler.

If you really want to place it in the bottom it is more complicated.

Since we need to get attributes from the shortcode, you cannot call wp_footer hook directly. So we need to write a filter that display the modal in the footer.

Here is an exemple :

function draw_footer_modal($modal_id) {
    add_action('wp_footer', function () use ($modal_id) {
        ?>
        <div class="modal fade" id="<?= $modal_id; ?>" tabindex="-1" role="dialog" aria-labelledby="<?= $modal_id; ?>'Label" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content subscribe-fields">
                    <div class="modal-body">
                        <div class="fullframe">my modal is here! </div>
                    </div>
                </div>
            </div>
        </div>
        <?php
    });
}

add_filter('draw_a_modal', 'draw_footer_modal', 10, 1);

function action_button_shortcode($atts, $content = null) {
    extract(shortcode_atts(
                    array(
                        'title' => 'Title',
                        'color' => 'blue', // blue, green
                        'url' => 'url',
                        'icon' => 'arrow', // arrow, download, email, search, account, lock
                        'level' => 'primary', // primary, secondary, tertiary
                        'target' => 'self', // blank, self
                    ),
                    $atts
    ));
    if ($target == 'modal') {
        do_action('draw_a_modal', '#modal' . url_to_postid($url)); // Apply the action here
        return '<span class="byn-btn btn-' . $level . ' bg-' . $color . ' icon-' . $icon . '" data-toggle="modal" data-target="#modal' . url_to_postid($url) . '"><span>' . $title . '</span></span>';
    } else {
        return '<a href="' . $url . '" class="byn-btn btn-' . $level . ' bg-' . $color . ' icon-' . $icon . '" target="_' . $target . '"><span>' . $title . '</span></a>';
    }
    $content = wpautop(trim($content));
}

add_shortcode('ci-action-button', 'action_button_shortcode');

I recommend putting the modal id attribute in a variable to avoid being different in target attribute than in the id attribute