最终效果如图所示：
 
（个人方法）
登陆框弹出实现思路：
页面刷新出来，默认登陆框的display为none。点击登陆后，将登陆框的display设置为block。即实现了弹出的效果。
弹出登陆框后锁屏效果实现思路：
 要实现锁屏效果，主要是对两个对象操作，一是覆盖全屏幕的灰色带透明效果的div，另一个就是点击登陆所弹出的登陆框。可以设置div的css的z-index为998，登陆框的css的z-index为999（两者的关系满足登陆框的z-index大于div的z-index即可，但考虑到兼容性问题，不要设z-index为0）。由于登陆框的z-index大于div的z-index，而div的z-index又大于头部导航栏的z-index（头部导航栏未设置z-index，默认为auto，即不参与层级的比较）。所以此时登陆框在最上层，div在中间一层，头部导航栏在最下面一层。即实现了锁屏的效果，登陆框可以进行点击输入等操作，而头部导航栏不能被操作。

相关代码：
登陆框弹出：略。
弹出后锁屏：略。