Question

我是Semantic-UI-React框架的新手，最近遇到了一个我似乎无法解决的问题。我有一个登录＆amp;在我的主页上注册Modal。触发“登录和注册”按钮后，弹出“模态”。但是，我不能让它出现在页面的中心。它位于页面顶部，部分切断。我该怎么做呢？提前感谢您的帮助！

Answer 1

包含模态对话框的外部<div>包含display: block;而不是flex，这会导致错位。更具体地说，display: flex的{{1}}定义出于某种原因被.dimmed.dimmable > .ui.visible.dimmer强加的display: block !important所覆盖。

您可能希望将以下内容添加到CSS中以解决此问题：

.visible.transition

或者，如果您使用的是css模块：

.dimmed.dimmable > .ui.modals.dimmer.visible {
  display: flex !important;
}

Answer 2

几个月前，我在学习时遇到了这个问题，这就是我对问题进行排序的方式。在App.js文件夹下的.css文件中，只需添加：

.modal {
    height: auto;
    top: auto;
    left: auto;
    bottom: auto;
    right: auto;
}

希望它会有所帮助。干杯

Answer 3

目前SUI中的模式存在问题，请查看此问题https://github.com/Semantic-Org/Semantic-UI/issues/6185

如何在语义-UI-React中集模态？

3 个答案: