将 uib 模态内容移出模态内容到页面顶部

Posted 2023-03-06

【中文标题】将 uib 模态内容移出模态内容到页面顶部

【英文标题】：Move uib Modal Content out of the modal content to top of page

【发布时间】：2017-12-26 07:58:57

【问题描述】：

我在 uib 模态窗口中有一些内容。我希望将该内容移动到 html 的顶部（固定到 html 的顶部）。

我试过设置

position: fixed;
top: 0

它会到达顶部。但它仍然停留在模态内容中（而不是网页顶部）

我怎样才能把它从 div 中拉出来并贴在我的网页顶部？

小提琴在这里：https://jsfiddle.net/Mahesh434/6ktc4g8j/

【问题讨论】：

试着把它放在模态框之外

那无济于事.. div 应该在模式中.. 但是当我做一些动作（比如滚动）时，我需要将它移到页面顶部。

问题在于模态对话框中的 transform: translate(0,0) css 属性。这是一种错误。使用 transform: translate(0,0) 属性的 position: fixed 的子元素相对于父元素而不是视口。

【参考方案1】：

我使用以下方法解决了这个问题，希望这对某人有所帮助。

添加css：

.modal-dialog 
  transform: none;

注意：但不确定添加这一行有什么影响；

在我的情况下，模型按预期工作，没有任何问题。