How to know if materialize css modal is open or not

Question

I am using materialize css modal. I want to change style of my div whenever modal is opened.

I have tried the below code but it does not seem to work.

$(document).ready(function() {
    $('.modal').modal();
    if($('.modal').isOpen == true) {
        document.getElementById("a").style.zIndex = "1000";
    }
});

I am looking for a boolean value to check whether modal is open or not.

Answer 1

You can use M.Modal.getInstance(elem) and isOpen property

$('.modal').modal()

var instance = M.Modal.getInstance(document.getElementById('modal1'))
instance.open()

console.log(instance.isOpen)

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

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

<!-- Modal Structure -->
<div id="modal1" class="modal modal-fixed-footer">
  <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>