Modal开发注意事项1

1.PC端直接设置Html的overflow:hidden即可(注意点:当设置overflow:hidden的时候,右边的滚动条会消失,会出现闪动的情况,可以通过设置body的border-right:solid 17px transparent,然后取消dialog的时候再去除掉border-right)

2.移动端设置html,body的overflow:hidden,但是dialog的滚动还是会穿透

3.移动端设置touchmove的preventDefault,这样会导致dialog的touchmove也无效

4.设置body为fixed,需要用js来还原当前滚动位置

Bootstrap的modal允许滚动穿透,但是在关闭modal之后会对背景位置进行还原。
链接: Bootstrap-Modal(2018-6-21)

样例

打开底部Modal
打开中间Modal
打开全屏Modal
打开loading动画
占位符