Materializecss modal not open when page loading

Question

I have latest materialize css and Jquery. I try to a warning message by using modal when page loading completely. But never working

<div id="myModal"  class="modal bottom-sheet">
<div class="modal-content">
  <font size="2">Sitemizden en iyi şekilde faydalanabilmeniz için çerezler kullanılmaktadır. Bu siteye giriş yaparak çerez kullanımını kabul etmiş sayılıyorsunuz</font>
</div>
<div class="modal-footer">
  <a href="#!" class="modal-close waves-effect waves-green btn-flat" style="font-size: smaller;margin-top: 0px;height: 30px;">Agree</a>
</div>

And the script is like that,

<script type="text/javascript">
   $(document).ready(function(){
       $('.modal1').modal('open');
    });                             
</script>

If I use button to open modal, it works. So CSS and JQuery works Have you any idea?

Answer 1

This is working well for me

$(document).ready(function() {
  $('.modal').modal().show();
  $('.modal-close').click(function() {
    $('.modal').hide();
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />


<div id="myModal"  class="modal">

<div class="modal-content">
  <font size="2">Sitemizden en iyi şekilde faydalanabilmeniz için çerezler kullanılmaktadır. Bu siteye giriş yaparak çerez kullanımını kabul etmiş sayılıyorsunuz</font>
</div>
<div class="modal-footer">
  <a href="#!" class="modal-close waves-effect waves-green btn-flat" style="font-size: smaller;margin-top: 0px;height: 30px;">Agree</a>
</div>
</div>