关闭第一个模式后加载模式（引导 3）答案

【问题标题】：Loading a modal after closing a first (Bootstrap 3)关闭第一个模式后加载模式（引导 3）
【发布时间】：2017-07-09 12:33:55
【问题描述】：

我在页面上有一个模式 (.lockdown)，它有两个关闭按钮。其中一个 (.btn-typoedit) 只是关闭模式，而另一个 (.btn-newcontact) 关闭模式然后立即打开另一个 (#change-contact)。但是，当第二个模式关闭时，整个页面会稍微“移动”，然后我会出现第二个滚动条的空间。

这是我正在使用的 Javascript 代码：

$(document).ready(function() {
    $('.btn-newcontact').on('click', function() {
        $('#change-contact').modal('show');
    });
});

还有一个 JSFddle 来查看故障（打开第一个模式，然后单击“NEW”）：https://jsfiddle.net/z904fzcm/

查看 Bootstrap 文档，我可以设置一个在 .hidden.bs.modal 上运行的事件，但我不太确定是什么导致了故障。

【问题讨论】：

标签： jquery twitter-bootstrap twitter-bootstrap-3 bootstrap-modal

【解决方案1】：

将溢出隐藏添加到正文

   $(document).ready(function() {
    $('.btn-newcontact').on('click', function() {

    $('#change-contact').modal('show');
      $('body').css({'overflow':'hidden'});
    });
});

演示：https://jsfiddle.net/pf9juunm/

更安全的解决方案是使用类来切换状态：

$(document).ready(function() {
  $('.btn-newcontact').on('click', function(e) {
    $('#change-contact').addClass('active');
    $('.lockdown').modal('hide');
  });


  $('.lockdown').on('hidden.bs.modal', function() {
    if ($('#change-contact.active').length) $('#change-contact').modal('show');
    $('#change-contact').removeClass('active');
  });
});

https://jsfiddle.net/pf9juunm/1/

【讨论】：

看起来相当不错——滚动条现在不会出现在模式之间。不过，我仍然可以看到内容的变化，页面上的第一个按钮停止工作？
第二种解决方案很棒 - 它不会移动页面内容！

【解决方案2】：

这可能是 Bootstrap 模式的故障。

解决方法可以是通过删除fade 来删除动画，或者在调用.lockdown 之前设置一个超时时间（~500 毫秒）

你也可以这样做body { padding-right: 0 !important }

演示：https://jsfiddle.net/z904fzcm/1/

【讨论】：

您会注意到滚动条在第一个模态打开时消失，但在第二个模态打开时重新出现。我想知道是否有办法阻止这种情况发生......
对我来说，它在我看来并不...在我看来，在开始时和离开礼仪时侧边栏，因为文本框有很多高度...

【解决方案3】：

它在主体中添加了一个填充，这就是它略微移动的原因。尝试使用 jQuery 删除该填充。

您可以尝试 removeAttr 从正文中删除样式属性。

$('body').removeAttr('style');

【讨论】：

【解决方案4】：

观察代码在模态打开/关闭时的变化方式，我设法推断出以下内容：

当模式打开时，body 接收类 .modal-open 并接收 CSS padding-right: 17px。
当模态框关闭时，上述类和 CSS 将被移除。
由于关闭一个模式和打开另一个模式的代码在同一个 .on('click') 声明中，因此删除了 .modal-open 类和 CSS，但从未为第二个模式重新添加。

为了解决这个问题，我观察了一个名为changeContact 的变量，在页面加载时设置为0，然后在单击相关按钮时更改为1。如果在检查 Bootstrap 有用的hidden.bs.modal 事件时该变量是1，我然后打开第二个模式。这会将代码分成两个单独的函数，这意味着 CSS 已正确修改。

$(document).ready(function()
{
    var changeContact = 0;

    $('.btn-lockdown').on('click', function() {
        changeContact = 0;
    });

    $('.btn-newcontact').on('click', function() {
        $('.lockdown').modal('hide');
        changeContact = 1;
    });

    $('.lockdown').on('hidden.bs.modal', function() {
        if (changeContact) {
            $('#change-contact').modal('show');
        }
    });
});

See it in action on JSFiddle

【讨论】：