emm。..真想问一句，tm到底哪里来的那么多弹窗？操作成功会弹出弹窗，失败会弹窗，点击头像会弹出弹窗，任意按钮都会有弹窗upwindow，一个页面中弹窗的代码比一堆页面的代码多一万倍，不好直接在页面显示的东西第一反应肯定是用pop-upwindows，也不要动脑子去想能不能把一些不方便展示的东西直接放在一个页面上或者有没有别的地方，你别烦我，我烦……三步骤一弹窗，你给我说说用户体验，多好笑？（我喷完了。。。）只是弹窗就好了。输入框元素；当然，这些问题在Android中是不存在的，但是在ios中却存在光标错位的痛苦；这真是个麻烦的问题，固定定位的弹窗有输入，在多次点击后，光标会错位，（这个问题不会出现两次一次）出现这个问题的原因是虚拟键盘的ios提升了视野。这个时候input和view一起被抬起，折叠在键盘上。之后，视野似乎恢复了，但光标仍有一定几率停留在抬起的地方；更深层次的原因是ios对fixed支持不友好；从ios8开始就有开发者反馈这个问题，在ios13中依然存在这个问题，我在-webkit的反馈记录中看到在ios12中已经修复了这个问题，但是如果真的解决了，我还会这么痛苦吗？反正到9102年9月30日更新ios13，这个问题依然存在；在网上查了半天，大致有两种解决方法。第一种是弹窗出来后固定body，弹窗消失后取消body的固定位置；.bodyFixed{位置：固定宽度：100%；高度：100%；左：0；top:0;}varModalHelper=(function(bodyCls){varscrollTop;return{afterOpen:function(){scrollTop=document.scrollingElement.scrollTop;//记录这个东西是为了防止弹窗返回显示/隐藏时0的位置document.body.classList.add(bodyCls);document.body.style.top=-scrollTop+'px';},beforeClose:function(){document.body.classList.remove(bodyCls);document.scrollingElement.scrollTop=scrollTop;}};})('bodyFixed');$(".open").click(function(){$(".pop").show();ModalHelper.afterOpen();})$(".close".click(function(){$(".pop").hide();ModalHelper.beforeClose();})上面其实主要是解决弹窗后背景还能滑动的问题,也就是滚动穿透的问题,不过也实现了上面记录的解决光标错位的问题,但是实际还是没有办法解决光标错位的问题...警告,这个东西只能用来解决滚动穿透的问题。如果弹窗有输入，一定不能用来防止滚动穿透。在这种情况下，你可以尝试使用better-scroll.js。告诉你吧，简单又超级实用。不知道为什么网上那么多人说用这个方法可以解决光标错位的问题。以前可能是可以的，但反正我没成功过，因为光标错位的根本原因是ios对fixed的支持不友好，所以只要有fixed肯定不行。第二种方式是不使用固定定位。既然不支持fixed，那么不用也没事。..我试过了，确实不使用fixed不会出现光标错位的问题，但是会出现很多问题；1、弹出窗口可以滚动。本来使用fixed最主要的目的就是占屏，以免出现Scrolling，取消fixed弹窗自然会随着body滚动，解决这个问题也很简单，可以使用touchmove事件。背景元素上的prentDefault，防止默认滑动；2.解决了滑动问题，第二个问题来了现在，如果不使用fixed定位进行定位，那么就必须在mask上使用absolute或者relative，但是此时top定位不好，但是你可以获得滚动距离，$(document).scrollTop();掩码的顶部是页面滚动的距离。如果这样做，就可以模拟固定情况；3.这是最难受的一点。在这种相对或绝对定位的情况下，就会弹出虚拟键盘。弹框，不过你收起来tmd不会恢复给你的。这时候弹起键盘，弹窗会一直往上推。。。后来发现一个方法scrollIntoView(bool|obj)，用在了nativedom上，所以如果它是jq对象，需要转成js对象；这个api的作用是让dom对象滚动到浏览器窗口的可见区域该方法可以接受布尔参数或对象参数；如果为true，元素的顶部将与所在滚动区域的可见区域顶部对齐，如果为false，则与底部对齐。详细可以了解这个方法后问度娘。可以在输入focusin或者focusout的时候使用这个方法，让弹窗的内容容器调用scrollIntoView()，保持在可见区域的顶部，防止弹窗不断被推上去但是在使用上面的方法之后，会带来两个新的问题。1.位置还原问题。使用scrollIntoView后，弹窗粘贴到最上面，但是当你收起键盘时，你的弹窗无法返回Herecomes...wowaoldmoreblood;这时，唯一能做的就是监听并收起键盘事件。可惜没有这个回调函数。。。网上可以找一些相关的方法，但是我试了一些都不行。..2、Jitterios在切换输入时会自动调整聚焦输入的距离。它会让input元素保持在可见范围内，这样用户可以获得更好的输入体验，但是这个和scrollIntoView是有冲突的，scrollIntoView是让元素贴在顶部或者底部，但是ios会动态调整top的输入（或弹出窗口），这样最后两个就可以了。你想坚守顶峰吗？劳资不让，我要在可视范围内。。。然后引起鬼摇；那么到底有没有什么办法可以完美解决呢……可惜没找到；我在这里找到了一个相当不错的方法，至少我在测试我中间来回戳了很多次的文件，中途收起键盘，再次弹出键盘。其实中间有一点距离错位（我点击输入时的蓝色背景可以看出），但是还是触发了键盘，去掉点击时产生的蓝色背景，几乎感觉不到错位。发个例子。登录模态{z-index:750;位置：固定；高度：100vh；宽度：100vw；填充：0；保证金：0；顶部：0；左：0；显示：无；&.act{显示：表格；}.mask{显示：表格单元格；垂直对齐：中间乐；文本对齐：居中；背景色：rgba(0,0,0,0.5);.content.container{显示：内联块；保证金：自动；边界半径：.04rem；宽度：90%；背景颜色：白色；填充：.25rem；输入{宽度：100%；高度：0.75rem；保证金底部：.35rem；显示：块；背景色：#ccc；边框：1px纯红色；}}}
