HTML:

<div id="im_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="Image" aria-hidden="true">
    <div class="modal-footer">
        <a type="button" class="btn pull-left" href="javascript:close_preview()">Cancel</a>
        <button type="submit" class="btn btn-primary pull-left">OK</button>

Javascript:

function close_preview() {
    $("#im_modal").modal("hide");
}

The function close_preview is being called, but doesn't close the modal.

HTML:

<div id="im_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="Image" aria-hidden="true">
    <div class="modal-footer">
        <a type="button" class="btn pull-left" href="javascript:close_preview()">Cancel</a>
        <button type="submit" class="btn btn-primary pull-left">OK</button>

Javascript:

function close_preview() {
    $("#im_modal").modal("hide");
}

The function close_preview is being called, but doesn't close the modal.

• javascript
• twitter-bootstrap

• Do you have the ids duplicated? – PSL Commented Sep 10, 2013 at 22:32

2 Answers 2

It should work, probably the positioning of the function close_preview is not where it is supposed to be. But there is another way without using any methods/events you can add data-dismiss attribute to the button.

<a type="button" class="btn pull-left" data-dismiss="modal">Cancel</a>

Fiddle

For people using Coffeescript with the hide event, be careful with the implicit return. It interrupts the event's propagation. Be sure to return the event.

$('#myModal').on 'hide.bs.modal',(e)->
  //something
  return e