How to close modal by clicking on background (Twitter Bootstrap)

Question

Hi I set the default for twitter bootstrap modals to not close when the user clicks on the background

$.fn.modal.defaults = {
    backdrop: 'static'
  , keyboard: false
  , show: false
}

However, there is one particular scenario whereby I need to overwrite this default to allow the user to click the background to close the modal.

I tried to overwrite it when displaying the particular modal

//Modal to be displayed and allow user to close it by clicking on background
view = new Onethingaday.Views.Muses.MuseModalView
  model: @options.muse

$('.modal').html view.render().el
$('.modal').bind 'shown', =>
  $('.modal').modal
    'backdrop': true
  ('.modal').unbind 'show'
$('.modal').modal('show')

However, my code above doesn't work. Anyone has any idea how can modify the code to make it work. Also, the code above seem to be changing the default behavior of ALL my modals in the app which is not what I want. How do I change the backdrop just for this particular modal (i.e. MuseModalView)? Thanks!

Answer 1

I was dealing with similar problem today. At first, I found this discussion: https://github.com/twitter/bootstrap/issues/1202 . Someone suggested setting isShown on false, to prevent modal window from closing on backdrop click:

$('myelement').data('modal').isShown = false

I can`t say that I liked the hack, especially when I found out that modal window does not close properly on Ok/Cancel button click - while isShown is set to false. I could not find a better solution, so I did this: I set global defaults backdrop: "static" (disable close on backdrop click) and added this code:

  $('#myModal').on('shown', function () {
    $("div.modal-backdrop").on('click', function() {
      if(myCondition == true) {
        $('#myModal').modal('hide');
      }
    })
  });

div with class modal-backdrop is dynamically appended to body when modal window is opened, and removed when closed - for each modal window. That means we should make sure that we handle this properly if we stack modal windows. So, I adjusted my upper code a little bit:

  $('#myModal').on('shown', function () {
    $("div.modal-backdrop").each(function(){
      if($(this).data('wired') !== 'true'){
        $(this).on('click', function() {
          if(myCondition == true){
            $('#myModal').modal('hide');
          }
        }).data('wired', true);
      }
    })
  });

This code should close modal window only when myCondition is true. It should work fine for me, and I hope that will also help you and anyone else who will meet similar problem.