8

嗨，我将 twitter 引导模式的默认设置设置为在用户单击背景时不关闭

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

但是，在一种特殊情况下，我需要覆盖此默认值以允许用户单击背景以关闭模式。

我试图在显示特定模式时覆盖它

//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')

但是，我上面的代码不起作用。任何人都知道如何修改代码以使其工作。此外，上面的代码似乎正在改变我在应用程序中所有模式的默认行为，这不是我想要的。如何仅为这个特定模式（即 MuseModalView）更改背景？谢谢！

4

1 回答 1

7

我今天正在处理类似的问题。起初，我发现了这个讨论：https ://github.com/twitter/bootstrap/issues/1202 。有人建议将 isShown 设置为 false，以防止模式窗口在背景点击时关闭：

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

我不能说我喜欢这个 hack，尤其是当我发现模式窗口在单击确定/取消按钮时没有正确关闭时- 而 isShown 设置为 false。我找不到更好的解决方案，所以我这样做了：我设置了全局默认背景：“静态”（在背景点击时禁用关闭）并添加了以下代码：

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

具有 modal-backdrop 类的 div 在模态窗口打开时动态附加到正文，并在关闭时删除 -对于每个模态窗口。这意味着如果我们堆叠模态窗口，我们应该确保正确处理这个问题。所以，我稍微调整了上面的代码：

  $('#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);
      }
    })
  });

仅当 myCondition 为 true 时，此代码才应关闭模式窗口。它对我来说应该可以正常工作，我希望这也能帮助你和任何会遇到类似问题的人。

于 2013-03-13T20:35:19.797 回答