bootstrap 关闭模态并显示另一个模态

Question

使用 Bootstraps 模态时有点问题，

我有一个使用模式的登录表单（按下时会出现登录表单）

如果用户没有帐户，他们可以按 "sign up" 我希望关闭登录模式并显示注册模式

我有这个工作，点击注册时登录表单被取消，但是当显示注册模式时，您不能在注册模式上向上或向下滚动，（您可以向上或向下滚动登录模式）

抱歉解释太长，下面的 jsfiddle 是我的代码，

<p> Don't have an account? <a data-dismiss="modal" data-toggle="modal" data-target="#myModal1"> Sign up</a>

这是关闭登录模式并显示注册模式的代码。我知道模态通过 data-dismiss="modal" 被关闭（因此页面认为模态已关闭并滚动浏览网页）但是我不知道如何找到解决这个问题的方法。

lorem ipsum 用于显示滚动示例。

第一个表单是登录模式，第二个表单是注册

感谢您的帮助！

Answer 1

这对我有用 fiddle

<p> Already't have an account? 
  <a href="#" data-dismiss="modal" data-toggle="modal" data-target="#myModal"> Sign in </a>
</p>

所以我在这里所做的是首先按操作顺序关闭第一个模态。之后，下一步是再次显示您的登录信息 window。

Answer 2

我成功完成了以下操作。我创建了一个 class 属性溢出：隐藏。只要 myModal1 打开，它就会添加到正文中。

$("#button").click(function(){
    $('#myModal').modal("hide");   
    $('#myModal1').modal("toggle");
    $("body").addClass("notScroll");

});

当 myModal1 关闭时，class 被移除：

$('#myModal1').on('hidden.bs.modal', function () {
    $("body").removeClass("notScroll");
});

现在，您必须允许 myModal1 滚动：

<modal... id="myModal1" style="overflow-y: scroll">

bootstrap dismiss modal and display another modal