Dynamically build Twitter Bootstrap modal

Update:

Since posting this, I've found an elegant bootstrap 3 modal wrapper function here, which doesn't require adding a div to the html code.

Here's a code sample that demonstrates this. To use, just add a div in your <body> (inside bootstrap's <div class="container">, for example:

<div id="idMyModal"></div>

and then you can use it via:

var header = "This is my dynamic header";
var content = "This is my dynamic content";
var strSubmitFunc = "applyButtonFunc()";
var btnText = "Just do it!";
doModal('idMyModal', header, content, strSubmitFunc, btnText);

To close the modal, issue a call to hideModal, also defined below:

function doModal(placementId, heading, formContent, strSubmitFunc, btnText)
{
    var html =  '<div id="modalWindow" class="modal hide fade in" style="display:none;">';
    html += '<div class="modal-header">';
    html += '<a class="close" data-dismiss="modal">×</a>';
    html += '<h4>'+heading+'</h4>'
    html += '</div>';
    html += '<div class="modal-body">';
    html += '<p>';
    html += formContent;
    html += '</div>';
    html += '<div class="modal-footer">';
    if (btnText!='') {
        html += '<span class="btn btn-success"';
        html += ' onClick="'+strSubmitFunc+'">'+btnText;
        html += '</span>';
    }
    html += '<span class="btn" data-dismiss="modal">';
    html += 'Close';
    html += '</span>'; // close button
    html += '</div>';  // footer
    html += '</div>';  // modalWindow
    $("#"+placementId).html(html);
    $("#modalWindow").modal();
}


function hideModal()
{
    // Using a very general selector - this is because $('#modalDiv').hide
    // will remove the modal window but not the mask
    $('.modal.in').modal('hide');
}

Update

I recently stumbled upon bootbox.js which is a whole library dedicated to dynamically creating bootstrap modals and reacting to users interaction with them. Though different than the method below, bootbox accepts callbacks rather than a function name. I haven't personally used it yet because I can't justify a 26kb library to essentially do what the function below does. But I thought somebody might find it useful.

Update 8/17/2016

I now use bootbox for pretty much every project I need dynamic modals. Works great a I highly recommend it.

Update 10/1/2018

Bootbox doesn't officially support bootstrap 4 yet but there is a bootbox v5.x branch where they are working on bootstrap 4 support. According to the 5.0.0 roadmap and Bootbox 5.0 ship list ticket it sounds like the branch is pretty much ready to go but they haven't released it yet. But there are some instructions on how to use it. Disclaimer: I have not yet used to v5.x branch and can't vouch for its completeness.

Update 3/25/2019

Bootbox 5.0 was released which supports Bootstrap 4.

Original Post

Code take from Ammon's answer above. Update for bootstrap 3.0

function doModal(placementId, heading, formContent, strSubmitFunc, btnText)
{
    html =  '<div id="modalWindow" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="confirm-modal" aria-hidden="true">';
    html += '<div class="modal-dialog">';
    html += '<div class="modal-content">';
    html += '<div class="modal-header">';
    html += '<a class="close" data-dismiss="modal">×</a>';
    html += '<h4>'+heading+'</h4>'
    html += '</div>';
    html += '<div class="modal-body">';
    html += formContent;
    html += '</div>';
    html += '<div class="modal-footer">';
    if (btnText!='') {
        html += '<span class="btn btn-success"';
        html += ' onClick="'+strSubmitFunc+'">'+btnText;
        html += '</span>';
    }
    html += '<span class="btn" data-dismiss="modal">';
    html += <?php echo "'".__t("Close")."'"; ?>;
    html += '</span>'; // close button
    html += '</div>';  // footer
    html += '</div>';  // content
    html += '</div>';  // dialog
    html += '</div>';  // modalWindow
    $("#"+placementId).html(html);
    $("#modalWindow").modal();
    $("#dynamicModal").modal('show');
}

This is what I ended up using for my needs. Also includes an event handler for removing the modal from the DOM once it is closed. I just needed an info modal, so I took out the submit function and button text arguments.

function doModal(heading, formContent) {
    html =  '<div id="dynamicModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="confirm-modal" aria-hidden="true">';
    html += '<div class="modal-dialog">';
    html += '<div class="modal-content">';
    html += '<div class="modal-header">';
    html += '<a class="close" data-dismiss="modal">×</a>';
    html += '<h4>'+heading+'</h4>'
    html += '</div>';
    html += '<div class="modal-body">';
    html += formContent;
    html += '</div>';
    html += '<div class="modal-footer">';
    html += '<span class="btn btn-primary" data-dismiss="modal">Close</span>';
    html += '</div>';  // content
    html += '</div>';  // dialog
    html += '</div>';  // footer
    html += '</div>';  // modalWindow
    $('body').append(html);
    $("#dynamicModal").modal();
    $("#dynamicModal").modal('show');

    $('#dynamicModal').on('hidden.bs.modal', function (e) {
        $(this).remove();
    });

}

Tags:

Javascript

Ajax

Ruby On Rails

Jquery

Twitter Bootstrap

Recent Posts