jquery – 如何通过单击背景关闭模式(Twitter Bootstrap)

前端之家收集整理的这篇文章主要介绍了jquery – 如何通过单击背景关闭模式(Twitter Bootstrap)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
嗨我将twitter bootstrap模式的默认值设置为在用户点击背景时不关闭
  1. $.fn.modal.defaults = {
  2. backdrop: 'static',keyboard: false,show: false
  3. }

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

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

  1. //Modal to be displayed and allow user to close it by clicking on background
  2. view = new Onethingaday.Views.Muses.MuseModalView
  3. model: @options.muse
  4.  
  5. $('.modal').html view.render().el
  6. $('.modal').bind 'shown',=>
  7. $('.modal').modal
  8. 'backdrop': true
  9. ('.modal').unbind 'show'
  10. $('.modal').modal('show')

但是,我上面的代码不起作用.任何人都知道如何修改代码使其工作.此外,上面的代码似乎正在改变应用程序中所有我的模态的默认行为,这不是我想要的.如何更改此特定模式的背景(即MuseModalView)?谢谢!

@R_301_323@

我今天正在处理类似的问题.起初,我发现了这个讨论: https://github.com/twitter/bootstrap/issues/1202.
有人建议设置isShown为false,以防止模式窗口在背景点击时关闭
  1. $('myelement').data('modal').isShown = false

我不能说我喜欢黑客,特别是当我发现模态窗口没有正确关闭Ok / Cancel按钮时 – 当isShown设置为false时.
我找不到更好的解决方案,所以我这样做了:
我设置了全局默认背景:“静态”(在背景单击时禁用关闭)并添加了以下代码

  1. $('#myModal').on('shown',function () {
  2. $("div.modal-backdrop").on('click',function() {
  3. if(myCondition == true) {
  4. $('#myModal').modal('hide');
  5. }
  6. })
  7. });

当模态窗口打开时,具有类模态背景的div被动态地附加到主体,并且在关闭时被移除 – 对于每个模态窗口.这意味着如果我们堆叠模态窗口,我们应该确保正确处理这个问题.所以,我调整了我的上层代码

  1. $('#myModal').on('shown',function () {
  2. $("div.modal-backdrop").each(function(){
  3. if($(this).data('wired') !== 'true'){
  4. $(this).on('click',function() {
  5. if(myCondition == true){
  6. $('#myModal').modal('hide');
  7. }
  8. }).data('wired',true);
  9. }
  10. })
  11. });

仅当myCondition为true时,此代码才应关闭模态窗口.它应该适合我,我希望这也将帮助你和其他任何会遇到类似问题的人.

猜你在找的jQuery相关文章