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

Reset Bootstrap modal params after initialization

本文关键字：模式 参数 初始化      更新时间：2023-09-26

Bootstrap 模态允许您通过 Javascript 传递选项来执行诸如使用 backdrop: "static" 使模态不可关闭之类的事情。

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

有没有办法在调用引导模式后重新初始化或更改其参数？

以下是显示该问题的代码片段：

$('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. 单击"静态模态"，出现无法关闭的模式。
  2. 刷新
  3. 单击"模态"，出现一个可以关闭的模态，将其关闭
  4. 单击"静态模态"，现在出现一个可以关闭的模态，当它不应该关闭时

我会推荐这个引导模式插件来快速解决您的问题：

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 方式在模态内构建花哨事物的机会。

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

或

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

相关文章：