A better Jquery bootstrap modal form

You can download the code from Github

A simple jQuery extension that turns a link into a Bootstrap 3 modal form launcher. Based on graceful degradation rules.

This plugin is similar to the default functionality of Bootstrap 3 for remote form modals. This plugin builds on that functioanlity to provide a better experience and encapsulates several hook events.

An example of usage. This is provides better control over the default Bootstrap 3 modals.

Potential data elements on the link to use are:

data-title=”Modal title”
data-target=”#id-of-custom-modal-html”
data-fragment=”#my-page-fragment”
Example links

<a class="graceful-modal-form" href="/my/url/to/a/form.html">Click me - example 1</a>
<a class="graceful-modal-form" data-title="Custom title" data-target="#custom-modal" href="/my/url/to/a/form.html">Click me - example 2</a>
    (function ($) {
 
        $('a.graceful-modal-form').modalForm({
            open: function(modal, target) {
                console.log('open: opening target .. ' + target);
            },
            submit: function (modal, target, data) {
                console.log('submit: submitted target .. ' + target);                
            },
            close: function(modal, target, event) {
                console.log('close: closing target .. ' + target);
            }
        });        
 
    })(jQuery);

For example 2, optional HTML can be specified for a custom modal. This is indicated in the data attributes. Otherwise a basic Bootstrap modal is generated by the plugin and used.

 
<!-- Modal -->
<div class="modal fade" id="custom-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel"></h4>
            </div>
            <div class="modal-messages">AWESOME!</div>
            <div class="modal-body" style="background-color:red;">
 
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default button-cancel" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary button-submit">Save changes</button>
            </div>
        </div>
    </div>
</div>

A common use case for me …

 
    $('.graceful-modal-form').modalForm({
        submit: function (modal, data) {
            if (data.Success == true) {
                // reload some data now that something has been added
                $("#treetable").fancytree("getTree").reload();
                // show a success message
                $.flashMessage.success(data.Message);
                // close the modal
                modal.modal('hide');
            } else {
                // set the message container to be scoped to the modal
                $.flashMessage.container = '#' + modal.attr('id') + ' .modal-messages';
                // show an error message
                $.flashMessage.error(data.Message);
            }
        }
    });

Comments are closed.