Search code examples
javascriptjquerysemantic-uifomantic-ui

Fomantic ui toast not showing up because of zindex

I am trying to use Fomantic ui "toast". How can i provide z-index to the setting of the Toast?

I have tried this '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/[email protected]/dist/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Solution

  • Give id to your body and handle via CSS like below. 

    #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/[email protected]/dist/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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.