子路线内的模态
Modals inside sub-routes
我在我的网络应用程序中使用 angular 2。
我的应用程序使用了很多 bootstrap 模式。
我注意到子路由组件中包含的模态显示不正确。
事实上,包含在导航栏元素内的模态(导航栏处于主状态并且始终可见)显示正确,但包含在子路径中的模态(因此 html 动态加载)存在错误...阴影似乎在对话框本身之上,因此无法按下按钮。
这是截图:
如您所见,背景位于对话框上方。这只发生在移动设备上。
我做错了什么?
我会避免将所有模式都保留在导航栏中,然后使用全局事件打开它们...
非常感谢
编辑:我发现这个 document:
If the modal container or its parent element has a fixed or relative
position, the modal will not show properly. Always make sure that the
modal container and its parent elements don’t have any special
positioning applied. The best practice is to place a modal’s HTML just
before the closing </body>
tag, or even better in a top-level position
in the document just after the opening <body>
tag. This is the best
way to avoid other components affecting the modal’s appearance and
functionality.
但是我的模态框(很多模态框)的 html 总是在 dom 中吗?是不是很重解?
我使用以下 javascript 代码修复了问题:
$('#myModal').appendTo("body").modal('show');
感谢 Adam Albright his post。
我在我的网络应用程序中使用 angular 2。 我的应用程序使用了很多 bootstrap 模式。 我注意到子路由组件中包含的模态显示不正确。 事实上,包含在导航栏元素内的模态(导航栏处于主状态并且始终可见)显示正确,但包含在子路径中的模态(因此 html 动态加载)存在错误...阴影似乎在对话框本身之上,因此无法按下按钮。
这是截图:
如您所见,背景位于对话框上方。这只发生在移动设备上。
我做错了什么? 我会避免将所有模式都保留在导航栏中,然后使用全局事件打开它们...
非常感谢
编辑:我发现这个 document:
If the modal container or its parent element has a fixed or relative position, the modal will not show properly. Always make sure that the modal container and its parent elements don’t have any special positioning applied. The best practice is to place a modal’s HTML just before the closing
</body>
tag, or even better in a top-level position in the document just after the opening<body>
tag. This is the best way to avoid other components affecting the modal’s appearance and functionality.
但是我的模态框(很多模态框)的 html 总是在 dom 中吗?是不是很重解?
我使用以下 javascript 代码修复了问题:
$('#myModal').appendTo("body").modal('show');
感谢 Adam Albright his post。