Generate modals

Modals

There is a generic modal in footer.php with id #genModal that is empty, waiting for it to be populated with information and then called:

The process for calling the modal can be as follows, assuming there is a link to the css .my_custom_modal class:

<a href="#" class="my_custom_modal">My custom modal</a>

<?php 
osc_add_hook('footer', 'js_my_custom_modal');
function js_my_custom_modal() {
?>
<script>
$(document).ready(function() {
    /* Show modal process */
    $(".my_custom_modal").click(function() {
        $('#genModal').modal('show');
    
        $('#genModal').on('shown.bs.modal', function(e) {
            modalHeader = '<h5 class="modal-title">My Custom modal</h5>';
            modalBody   = 'Hello world';
            modalFooter = '<button type="button" class="btn btn-secondary" onClick="genModalHide();return false;"><?php echo osc_esc_js(__('Close')); ?></button>';
            
            $("#genModal .modal-header").prepend().html(modalHeader);
            $("#genModal .modal-body").html(modalBody);
            $("#genModal .modal-footer").html(modalFooter);
        });
    });
});
</script>
<?php } ?>

Explanation:

• To fill the modal with information it has the following variables: modalHeader, modalBody and modalFooter. In them you can add HTML. In modalHeader the title of the header is inside <h5 class="modal-title"> and the modalFooter includes a button with the onclick attribute calling the genModalHide() function, that serves to hide and empty the modal (this function can be found in js/global.js).

• All the javascript programming is inside a php js_my_custom_modal() function, this allows us to add it to the footer hook, which is in charge of running said code at the end of the template near the closing of the </body> tag.