初始化后重置引导模式参数

Question

Bootstrap modals 允许你 pass options through Javascript 做一些事情，比如使用 backdrop: "static" 使你的 modal 不能关闭。

然而，一旦你初始化一个没有任何参数的模态$('#myModal').modal();，然后尝试用不同的参数再次调用它$('#myModal2').modal({backdrop:"static"});，模态仍然在没有参数的情况下初始化，在这种情况下它仍然是可关闭的，即使我使用backdrop: "static" 选项再次调用它。

有没有办法在 Bootstrap modal 被调用后重新初始化或更改其参数？

这是一个显示问题的 sn-p：

$('body').on('click','#static',function() {
    $('#myModal').modal({backdrop:"static"});
});

$('body').on('click','#modal',function() {
    $('#myModal').modal();
});

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<a id="static" href="#myModal" role="button" class="btn" >Static Modal</a>
<a id="modal" href="#myModal" role="button" class="btn">Modal</a>

<div class="modal fade" id="myModal">
   Foo
</div>

1. 点击“Static Modal”，出现无法关闭的modal。
2. 刷新
3. 点击“Modal”，出现一个可以关闭的modal，关闭它
4. 点击“静态模态”，现在出现一个模态，可以关闭，而不应该关闭

Answer 1

我会推荐这个 Bootstrap Modal 插件来快速解决你的问题：

http://nakupanda.github.io/bootstrap3-dialog/

回到这里的问题，通过使用上面的插件，你应该可以通过以下几行来实现：

    BootstrapDialog.show({
      title: 'To close or not to close it, this is a question.',
      message: 'Click buttons below and see how the closing behaviors change.',
      buttons: [{
        label: 'Modal closable',
        action: function(dialog) {
          dialog.setClosable(true);
        }
      }, {
        label: 'Modal unclosable',
        action: function(dialog) {
          dialog.setClosable(false);
        }
      }]
    });

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.js"></script>

这更像是一个 javascript 程序，不需要 html 标记，干净整洁。

如果您想更改对话框（模态）定义的任何闭包之外的关闭行为，还有一个示例：

// Prepare a dialog instance but do not open it at this moment
var dialog = new BootstrapDialog();

// Buttons clicked
$('#btn-closable').click(function() {
  dialog.setClosable(true);
  dialog.setTitle('This modal is CLOSABLE');
  dialog.setMessage('Just close the modal as usual.');
  dialog.open();
});
$('#btn-unclosable').click(function() {
  dialog.setClosable(false);
  dialog.setMessage(function(dialogInstance) {
    var $button = $('<button>Modal Closable</button>');
    $button.click(function() {
      dialogInstance.setClosable(true);
    });

    return $button;
  });
  dialog.setTitle('This modal is UNCLOSABLE');
  dialog.open();
});

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.js"></script>
<button id="btn-closable">
  Modal Closable
</button>
<button id="btn-unclosable">
  Modal Unclosable
</button>

第二个示例还演示了一种动态更改模态标题和消息的便捷方法，并且消息也可以设置为闭包，这为您提供了在模态中以 JAVASCRIPT 方式构建花哨的东西的机会。

Answer 2

$.extend( $( '#myModal2' ).data( 'bs.modal' ).options, { backdrop: "static" } );

或

$.extend( $( '#myModal2' ).data( 'modal' ).options, { backdrop: "static" } );