jquery-modal

jquery-modal copied to clipboard

Not an issue but I thought I would post it up for anyone else coming looking.

Here is a simple way to do a confirm modal:

    function confirmModal(confirmMessage, confirmCallback) {
        var modalConfirm = '<div class="modal">' + '<div>' + confirmMessage + '</div><div>' +
            '<a class="button js-confirmmodal-button" href="#">OK</a> ' +
            '<a class="button" href="#" rel="modal:close">Cancel</a>' +
            '</div></div>';

        var $modal = $(modalConfirm).appendTo('body').modal({
            fadeDuration: 100
        });
        
        $modal.on('click', '.js-confirmmodal-button', function(e) {
            e.preventDefault();
            confirmCallback();
            $.modal.close();
        });
    }

Use it something like:

    <a class="button js-confirmtest-button" href="#">
        Confirm Test
    </a>

and

        $(".js-confirmtest-button").on('click', function(e) {
            e.preventDefault();

            confirmModal("Please may I, oh great one?", function() {
                alert("You have confirmed this.");
            });
        });

Obviously you can take it from there to make the ok/cancel text customisable, add a cancel handler, etc.

Another thought; This will inject a new snippet of the template into the end of the page each time. If you are going to be using it on a long running page, or using it a lot, you might also want to delete the inject html after you're done with it.