Question

使用bootstrap模式弹出窗口我想显示一个弹出窗口，通知用户任务正在运行。在此期间，模态窗口可能不会关闭，所以我添加了属性：

{
  backdrop: 'static',
  keyboard: false
}

当ajax请求完成时，模态的内容会发生变化。此外，我可以重新启用改变属性值的背景 - 行为。我还想更改键盘行为，但只是更改属性在关闭并再次显示弹出窗口之前没有效果。

有没有办法重新启用esc-key而无需关闭模式弹出窗口？

另请参阅：http://jsfiddle.net/as3x6Lfp/1/

Answer 1

花了我一些时间，但只是在相关部分找到了这个问题的答案。 Change Bootstrap modal option once it already exists

我将属性更改为所需的值。之后我称之为'逃生'功能。

这是代码

$(".modal").data("bs.model").options.keyboard = true;
$(".modal").data("bs.modal").options.backdrop = true;
$(".modal").data("bs.modal").escape();

更新JSFiddle：http://jsfiddle.net/as3x6Lfp/2/

你可能会发现。它重新启用了esc-key，但是一旦显示模式弹出窗口就不能用它来禁用esc-key。这对我理想的解决方案来说没有问题。

Answer 2

我认为您需要完全销毁并重新设置需要隐藏然后显示的模态...

$('#myModal').on('shown.bs.modal', function () {

    var progress = setInterval(function() {
    var $bar = $('.bar');

    if ($bar.width()==500) {

        // complete!

        // reset progree bar
        clearInterval(progress);
        $('.progress').removeClass('active');
        $bar.width(0);

        // update modal 
        $('#myModal .modal-body').html('Task complete. You can now close the modal.');
        $('#myModal .hide,#myModal .in').toggleClass('hide in');

        // re-enable modal allowing close
        $('#myModal').data('reenable',true);
        $('#myModal').modal('hide');
    } else {

        // perform processing logic (ajax) here
        $bar.width($bar.width()+100);
    }

    $bar.text($bar.width()/5 + "%");
    }, 600);

});

$('#myModal').on('hidden.bs.modal', function () {
    // reset modal
   if ($('#myModal').data('reenable')) {
       $(this).removeData();
       $('#myModal').modal({
          show: true
       });
   }
});

http://www.codeply.com/go/NCsThOAy3V

Bootstrap模态更改键盘属性而不关闭（重新启用esc）

2 个答案: