Calling Bootstrap modal via JavaScript

Question

I have this javascript function:

function doDelete()
{
    if (root === null) {alert("Tree is Empty!"); return;}
    var strKey = document.getElementById('deleteKey').value;
    if (strKey=="") {alert("Please provide key"); return;}
    if (isNaN(strKey)) {alert("Key must be numeric"); return;}
    root = myBPT.Delete(root, strKey);
    myBPT.print_tree(root);
}

How can I change the alert to call a bootstrap modal instead?

This is my data-target... #printLeaves

Answer 1

The easiest way is not to use JavaScript at all to show the modal but just set the appropriate classes and data fields that allow Bootstrap to handle it. Some examples are here . Basically, you need to wrap <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> around your modal, then have the button look like:

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Launch modal
</button>

There's also an example further down if you want to trigger it with a non-button event, but then you do have to use JavaScript. I haven't done it using a separate script myself (my use case was with a button), but the documentation says you just call: $('#myModal').modal(options)