I have all requirements Jquery, Materialize.js sitting above my Js file however I get the warning openModal is not a function..I checked the modal name is right and I can run Materialize.toast so I know Materialize.js is working. Triggering with the button does not call the modal either. Here is the code..

Scripts:

<script type="text/javascript" src=".1.1.min.js"></script>
<script type="text/javascript" src="/js/materialize.js"></script>
<script type="text/javascript" src="/js/video.js"></script>
<script src="/js/admin.js"></script>

Trigger:

<button data-target="modal1" class="btn modal-trigger">Modal</button>

Modal:

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

js:

 var modal = document.getElementById('modal1');
  modal.openModal();
$('#modal1').leanModal();
$('#modal1').openModal();

I have all requirements Jquery, Materialize.js sitting above my Js file however I get the warning openModal is not a function..I checked the modal name is right and I can run Materialize.toast so I know Materialize.js is working. Triggering with the button does not call the modal either. Here is the code..

Scripts:

<script type="text/javascript" src="https://code.jquery./jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/js/materialize.js"></script>
<script type="text/javascript" src="/js/video.js"></script>
<script src="/js/admin.js"></script>

Trigger:

<button data-target="modal1" class="btn modal-trigger">Modal</button>

Modal:

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

js:

 var modal = document.getElementById('modal1');
  modal.openModal();
$('#modal1').leanModal();
$('#modal1').openModal();

• javascript
• jquery
• material-design
• materialize

3 Answers 3

Materialize functions needs Jquery Elements.
getElementById() - Gives us DOM Object.

//You can either convert this Dom object to Jquery

var modal = document.getElementById('modal1');
var jquerymodal = $(modal);  //convert to jQuery Element
jquerymodal.openModal();


//Or just use Jquery Element like

$('#modal1').openModal();

Ok I had the same issue and I fixed it by changing up the call to open the modal and the initialization.

If you had the same issue as I, check out the most recent documentation here

This may be new - openModal() is not used here.

Initialization:

<script>
   try {
       try {
      $('#modalId').modal();
  } catch (e) {
      console.info('loading modal auto-initialized..');
  }
   }
</script>

I added the try/catch because sometimes this is not needed

Implementation:

$('#modalID').modal('open');

Import the minified file in materialize/dist folder instead of materialize/js.

Run with: $('#elementId').modal(); $('#elementId').modal('show');

Just this way it worked.

EDIT:

In fact, it didn't work in production environment.

So I did this:

(function( $ ) {

    $.fn.showModal = function() {

        var self = this;
        try {
            this.modal();
            self.modal('open');
        } catch (err) {
            try{
                self.openModal();
            } catch (err2) {
                console.error("Something went wrong - cannot open modal.");             
            }
        }
    }


    $.fn.hideModal = function() {

        var self = this;
        try {
            this.modal();
            self.modal('close');
        } catch (err) {
            try{
                self.closeModal();
            } catch (err2) {
                console.error("Something went wrong - cannot close modal.");                
            }
        }
    }


}( jQuery ));

Use just: $('#modal').showModal()