Question

我在页面上有一个模态（.lockdown），它有两个关闭按钮。其中一个（.btn-typoedit）只关闭模态，但另一个（.btn-newcontact）关闭模态，然后立即打开另一个（#change-contact）。但是，当第二个模态关闭时，整个页面会移动＆＃34;稍微，我得到第二个滚动条的空间。

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

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

用JSFddle查看操作中的故障（打开第一个模态，然后点击＆＃34; NEW＆＃34;）：https://jsfiddle.net/z904fzcm/

通过Bootstrap文档，我可以将事件设置为在.hidden.bs.modal上运行，但我不太确定甚至会导致故障。

Answer 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/

Answer 2

这可能是Bootstrap模式的一个小故障。

解决方法可以通过删除fade或设置超时（~500ms）来删除动画，然后再调用.lockdown

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

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

Answer 3

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

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

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

Answer 4

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

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

为了解决此问题，我会查看名为changeContact的变量，在页面加载时设置为0，然后在单击相关按钮时更改为1。如果在检查Bootstrap的有用1事件时该变量为hidden.bs.modal，则我然后打开第二个模态。这将代码分成两个独立的函数，这意味着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

关闭第一个（Bootstrap 3）

4 个答案: