【问题标题】:Change Bootstrap modal backdrop settings while open打开时更改 Bootstrap 模态背景设置
【发布时间】:2017-05-16 05:18:51
【问题描述】:

我正在尝试将模式的背景设置更改为“静态”作为对事件的响应,以便它变得不可关闭。我在单击模式内的按钮后通过设置$('#myModal').modal({ backdrop: 'static',keyboard:false }) 尝试了此操作,但没有运气。

我想要的效果类似于nakupanda's bootstrap-dialog 的效果(请参阅操作按钮部分,当dialog.setClosable(true); 在单击“单击以禁用和旋转”按钮时触发时,模态不再可关闭)

请看这个jsfiddle

我知道这个问题已经被问过here,但它没有正确的答案。我知道这是可能的,但我无法分析 nakupanda 的代码。

【问题讨论】:

标签: javascript jquery twitter-bootstrap bootstrap-modal


【解决方案1】:

对于尝试在 v4 上执行此操作的任何人,您需要进行更改:

$("#myModal").data('bs.modal').options.backdrop = 'static';

$("#myModal").data('bs.modal')._config.backdrop = 'static';

【讨论】:

    【解决方案2】:

    您为什么不在页面加载时使用选项而不是在按钮单击时初始化模式?

    只需定义一个文档准备好的 fn 并将下面的代码放入其中。

    $('#myModal').modal({
        backdrop: 'static',
        keyboard: false
      })
    

    【讨论】:

    • 是的,我可以这样做,但这违背了问题的目的。在单击按钮之前,模式应该仍然是可关闭的。
    【解决方案3】:

    我想出了一个解决方案。问题是即使您将背景设置为静态,仍然有一个点击监听器。

    我的解决方案在这里。 https://jsfiddle.net/25zbf094/2/

    JavaScript

    $('#makeIndismissable').click(function(){
      $('#myModal').prop('onclick',null).off('click');
    });
    
    $('#close').click(function(){
        $('#myModal').modal("hide")
    })
    

    我基本保持 HTML 不变,但在关闭按钮中添加了“关闭”的 id。正如您在上面看到的,您仍然可以通过按右上角的 X 来关闭模态框。

    【讨论】:

      【解决方案4】:

      尝试改变modal的选项如下:

      $('#myModal').data('bs.modal').options.backdrop = 'static';
      

      这是working example

      【讨论】:

      • 这是最好的答案。
      • 这是解决问题的最佳方案。尊敬的先生。
      • @JamesA Kudos 和快乐编码.. :)
      • 谢谢!多年来一直在寻找如何做到这一点!
      • @JohnDoe.. 随时.. 快乐编码.. :)
      【解决方案5】:

      你可以试试这样的:http://codepen.io/bwobst/pen/GrKBKy?editors=1010

      $('#open-modal').click(function(evt) {
        $('#myModal').modal({backdrop: 'static'});
        $('.modal button').prop('disabled', true);
      });
      

      当您单击“打开模式”按钮时,它会将背景设置为静态并禁用模式中的按钮。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2018-12-27
        • 1970-01-01
        • 2019-06-01
        • 2013-10-16
        相关资源
        最近更新 更多