Twitter bootstrap - show modal by clicking on a link

Question

I'm using twitter bootstrap. I want modal to be shown by clicking on a link using javascript.

$("#my-link-id").click($(this).modal());

However, the code above causes an error of

Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3 

What did I do wrong?

Answer 1

You are calling the method modal before the user click's #my-link-id, the fix:

$("#my-link-id").click(function() {
    $(this).modal();
});

or:

$("#my-link-id").on("click", function() {
    $(this).modal();
});

---

To see an explanation on the error you can read here: What exactly can cause an "HIERARCHY_REQUEST_ERR: DOM Exception 3"-Error?

Answer 2

need to do preventDefault on the event to stop the click following the link instead of opening the modal.

    $("#my-link-id").click(function(e) {
        e.preventDefault();
        $(this).modal();
    });