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

需求是这样的:

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

问题是:

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

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

bootstrap官方也说

hewie^_^

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

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

产生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://www.hewie.cn/blog/Home/Article/article/article_id/2.html