Modal automatically opened with dismissible option

i'm trying to make a modal that opens automatically and at the same time it can't be closed until de end of reading all the content.I have this but it still can be closed by clicking outside the modal. I've seen some solutions but they use the dismissible option on the modal-trigger button, but i'm not using that button.

<script>
 $(document).ready(function(){
    $('#modal').modal();
    $('#modal').modal('open'); 
 });
$('#modal').modal({
      dismissible: false,
      
    }
  );

</script>

Solution

I'm guessing that you are mistaken on selecting the element, that's why it's not applied. The code below is exactly the way you wanted

$(document).ready(function(){
    $('.modal').modal({
        dismissible: false,
    });
    $('.modal').modal('open');
});

<html>
<head>
<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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
  <!-- Modal Trigger -->
  <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

  <!-- Modal Structure -->
  <div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>A bunch of text</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
  </div>
  </div>
</body>
</html>