bootstrap解除模态并显示另一个模态

时间:2015-04-07 01:42:39

标签: javascript jquery html css twitter-bootstrap-3

使用Bootstraps模式时​​遇到一些问题,

我有一个使用模态的登录表单(当按下登录表单时会出现)

如果用户没有帐户,他们可以按“注册”我希望解除登录模式并显示注册模式

我有这个工作,单击注册时登录表单被解除,但是当显示注册模式时,您无法在注册模式上向上或向下滚动,(您可以在登录时向上或向下滚动)模式)

对不起,很长的解释,下面的jsfiddle是我的代码,

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

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

http://jsfiddle.net/5v4nejsz/

lorem ipsum用于显示滚动的示例。

第一种形式是登录模式,第二种形式是注册

感谢您的帮助!

2 个答案:

答案 0 :(得分:1)

这对我来说是小提琴

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

所以我在这里做的是先按操作顺序解除第一个模态。之后,下一步操作是再次显示您的登录窗口。

Demo

答案 1 :(得分:1)

我成功了以下内容。我创建了一个属性溢出的类:隐藏。只要myModal1打开,就会将其添加到正文中。

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

});

当myModal1关闭时,该类将被删除:

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

现在,您必须允许myModal1滚动:

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

JSFIDDLE:http://jsfiddle.net/5v4nejsz/22/