-1

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

我试过这个'它正常工作，但在我正在工作的网站上'

<!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>

4

2 回答 2

1

像下面这样通过 CSS给id你的身体和处理。

#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>

注意：使用 id ，而不是使用 class。

于 2020-06-19T07:13:25.533 回答
0

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;
}
于 2020-06-19T10:41:24.117 回答