非你网

很多框架，网站，实现的模态窗口体验不是那么完美。不过，知乎的模态窗口却是很完美的。比如登录。知乎的模态窗口实现了以下几点：

1. 弹出模态窗口后。所有滚动条都隐藏（如果有的话），并且鼠标滑轮，无论怎么滚动，被半透明遮挡在下边的内容岿然不动。

2. 弹出模态窗口后。窗口在水平和垂直方向是都是居中的。

3. 关闭模态窗口后。滚动条功能恢复。

Demo: https://api.qiubg.com/demo/vnmodal

gitHub: https://github.com/vini123/vnmodal

要实现以上几点功能，通过js，css还是很容易的。先来实现模态窗口前后的变化。

弹出模态窗口前，判断在垂直方向上是否有滚动条。如果有滚动条，隐藏滚动条。并且将document的margin-right设置为17px。

    .hideScroll{
        overflow:hidden;
        margin-right:17px;
    }

    if(hasScroll())
        $('html').addClass('hideScroll');

    function hasScroll()
    {
        if($("body").scrollTop()>0)
        return true;

        $("body").scrollTop(10);

        if($("body").scrollTop()>0)
        {
        $("body").scrollTop(0);
        return true;
        }
        return false;
}

同样，关闭窗口的时候。复位。

知乎滚动条小bug

对体验要求严格的话，这个算是一个bug。实现过程如下：

1. 在知乎上找一个内容比较少的页面。找不到就自己创建一个提问，打开替换页面，有一个具体的url地址。然后退出登录，保证此时页面不存在纵向滚动。

2. 第一步保证页面不存在纵向滚动条的前提下（如果你怎么弄都有滚动条，那就f12进入开发者模式，手动删除dom达到）。点击登录按钮，弹出登录框。

3. 拖动窗口。将窗口的高度拖到更小，保证此时出现滚动条（只是存在登录框，你看不到），然后点击叉叉，关闭登录框。这个时候，你会发现滚动条出现了，网页的内容整体左移了。这个就是知乎滚动条小bug。