How I can open a materialize modal when a window is ready?

Question

I want to open a modal window when the user be in a window, I mean, open a modal without a trigger button, I have this example.

<button data-target="modal1" class="btn modal-trigger" id="btn-1">Modal</button>
<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-action modal-close waves-effect waves-green btn-flat ">Agree</a>
</div>

It works if I click on the trigger button, but I don't want a click. I use this code when the window is ready:

$(function()
{
    function checkCode()
    {
        $("#btn-1").click();
    }
});

This automatically push the button and make the effect that modal is auto opened, but I don't want to do this.

Answer 1

For Materialize v0.98.2

Create a modal

<div id="modal" 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-action modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
</div>

Open modal when a document ready load

<script>
 $(document).ready(function(){
    $('#modal').modal();
    $('#modal').modal('open'); 
 });
</script>

Answer 2

you can do that :

    $(document).ready(function(){
       $('.modal1').modal('open');
    });

Answer 3

This can be done with instance.open().

<script>
        document.addEventListener('DOMContentLoaded', function () {
            var Modalelem = document.querySelector('.modal');
            var instance = M.Modal.init(Modalelem);
            instance.open();
        });

</script>

Answer 4

Pure JavaScript solution.

const elem = document.getElementById('modal id here');
const instance = M.Modal.init(elem, {dismissible: false});
instance.open();

Answer 5

I found the solution in materialize.js We must use:

$(".MyModal").openModal()

to open modals and:

$(".MyModal").closeModal()

to close it. Materialize team forgot refresh their documentation.

Answer 6

In case you are still having problems given the other solutions, I had to nest the jQuery('#modal_id').modal('open') statement in a second document.ready statement like so:

jQuery(document).ready(function(){
      jQuery('#modal_id').modal();
      jQuery(document).ready(function(){
          jQuery('#modal_id').modal('open');
      });
});

I don't know why this works, and I know it's just plain ugly, but it works so..

Answer 7

You need to determine which event makes sense to trigger the modal to be displayed. onload or onmouseover may work for you instead of onclick.