Fomanti c тост не отображается из-за zindex - PullRequest
Новая
       88

Fomanti c тост не отображается из-за zindex

0 голосов
/ 19 июня 2020

Я пытаюсь использовать Fomanti c ui « тост ». Но он не отображается из-за Fomanti c ui. Z-index тоста ниже, чем у всего остального на странице . Как я могу указать 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>

Ответы [ 2 ]

1 голос
/ 19 июня 2020

Дайте id вашему телу и обработайте через 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>

Примечание: работать с id, а не с классом.

0 голосов
/ 19 июня 2020

Z-index для тоста задается toast-container, который уже получил z-index:9999 по умолчанию.

Вы можете переопределить это в соответствии с вашими потребностями (проверьте код вашего сайта для наивысшего z-индекса и добавьте 1) на 

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

Каждый тост внутри этого контейнера наследует z-index. Для большей уверенности вы можете добавить z-index для каждого тоста 

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