解决bootstrap多模态框跳转时页面左移问题

需求是这样的：

我有一个页面，点击登录跳出一个登录模态框，登录模态框上又有一个注册链接，点击跳出注册模态框，原来的登录模态框隐藏。

问题是：

大家都知道，bootstrap的模态框跳出时，页面是无法滚动的。

但是每次通过登录模态框跳转到注册模态框时，页面却是可以滚动的，而且当退出注册模态框时，页面会向左偏移一个页面滚动条的距离。

bootstrap官方也说

但是有时候确实需要实现这个功能 >-<

网上有很多添加或去除偏移量的方法，但都不适用于这种情况。

产生bug的原因

当跳出一个模态框时，是不会发生这种情况的。这说明bootstrap在实现模态框的时候，确实考虑到了页面滚动条的问题。

按道理说再多的模态框，只要按照顺序出现是不会影响显示效果的，所以问题肯定处在模态框的show与hide顺序上。

在这个案例中bug原因是：登录模态框的退出发生在了注册模块框的显示之前，导致模态框不能按照原先的方案hide与show

解决方法

据此，通过添加js修改模态框的出现与消失顺序

$("#ltor").click(function(){
		$("#loginModal").modal("hide");
		$("#loginModal").on("hidden.bs.modal",function(){
			$("#registerModal").modal("show");
			$("#loginModal").off().on("hidden","hidden.bs.modal");
		})
	})

在登录模块框上通过“ltor”链接，跳转到注册模块框时。先hide原来的登录模块框，再调用bootstrap中的一个“hidden.bs.model”事件，等待登录模态框完全退出后，再显示注册模块框。最后关闭对"hidden.bs.modal"的监听。

这里有个小坑，监听事件“hidden.bs.modal”应当在发挥作用后清除监听。否则下次当你关闭登录模块框时，无论是否点击了“ltor”链接，都会跳转到注册模块框。

个人见解，如有错误，欢迎指正。

原文地址：http://blog.csdn.net/somehow1002/article/details/73737321