全屏Modal需重置.modal-dialog为fixed全屏并设.modal-content高100%、无圆角，.modal-body加padding和max-width居中搜索框，禁用backdrop关闭用static，viewport设cover防键盘错位。
遮罩层怎么用 modal 实现全屏效果
bootstrap 默认的 modal 是居中、带边框、固定宽高的，要全屏必须覆盖默认样式。核心不是改 js，而是压住 .modal-dialog 的尺寸限制，并让内容撑满视口。
- 把
.modal-dialog改成position: fixed; top: 0; left: 0; width: 100%; height: 100%; margin: 0; -
.modal-content需设height: 100%; border-radius: 0;，否则顶部/底部有圆角留白 - 别忘了加
overflow-y: auto到.modal-body，不然长搜索结果会溢出不可滚动
搜索框怎么居中又不失响应式
全屏不等于“拉伸变形”。直接给 .form-control 设 width: 100% 会贴边难看，应该用内边距+最大宽度控制视觉重心。
- 给
.modal-body加padding: 4rem 1rem;（上下留空突出搜索框，左右窄边距适配小屏） - 包裹搜索框的
div加max-width: 600px; margin: 0 auto;，比写死width更安全 - 小屏下
padding-top改成2rem，避免状态栏遮挡——iOS Safari 里env(safe-area-inset-top)不稳定，手动调更靠谱
点击遮罩层背景怎么不关闭弹窗
默认点背景就 hide，但全屏搜索场景下用户大概率想点空白处继续输入，而不是误关。得关掉 backdrop 关闭逻辑，但保留 backdrop 视觉层。
- 初始化时加选项：
data-backdrop="static" data-keyboard="false" - 或者 JS 初始化：
$('#searchModal').modal({ backdrop: 'static', keyboard: false }); - 注意：
backdrop: false会彻底去掉遮罩层，不是你想要的；'static'才保留灰色背景但不响应点击
移动端键盘弹出后遮罩层错位怎么办
iOS 和部分安卓 WebView 下，软键盘顶起页面会导致 fixed 元素错位，尤其是 modal 顶部消失。这不是 Bootstrap bug，是 viewport 行为差异。
- 在
<head>里确保有：<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> - 给
.modal加style="min-height: 100vh;"，防止键盘顶起后内容区塌陷 - 真遇到错位，临时方案：监听
focusin到搜索框时，强制$('body').addClass('modal-open')并补一个height: 100vh，防 body 缩小
全屏搜索遮罩最麻烦的从来不是样式，而是软键盘和 fixed 定位在不同系统里的博弈。调完记得在真机上连按三次搜索框，看会不会闪一下再错位——那是 resize 事件没兜住。
