由于 zindex，Semantic ui toast 未显示

Question

我正在尝试使用 Semantic ui“toast”。 如何为 Toast 的设置提供 z-index？

我试过了'it works normally but not on the site i am working on'

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.6/dist/semantic.min.css">
    <script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.6/dist/semantic.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('body')
                .toast({
                    message: 'I am a toast, nice to meet you !'
                });
        });
    </script>
</head>
<body>

</body>
</html>

Answer 1

将 id 交给您的 body 并通过 CSS 处理，如下所示。

#yourID {
  background-color:rgba(255, 0, 0, 0.4);
  z-index: 9999;
}

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.6/dist/semantic.min.css">
  <script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.6/dist/semantic.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('#yourID')
        .toast({
          message: 'I am a toast, nice to meet you !'
        });
    });
  </script>
</head>

<body id="yourID">

</body>

</html>

Note: work with id , not with class.

Answer 2

toast 的 z-index 由 toast-container 给出，默认情况下已经有 z-index:9999。

您可以根据需要覆盖它（检查您的站点代码以获得最高的 z-index 并添加 1）

.ui.toast-container {
  z-index: 999999;
}

此容器内的每个 toast 都将继承 z-index。为了更加确定，您也可以为每个吐司添加 z-index

.ui.toast-container .toast-box {
    z-index:999999;
}

由于 zindex，Semantic ui toast 未显示

Fomantic ui toast not showing up because of zindex

javascript

jquery

semantic-ui

fomantic-ui