MaterializeCss modal Error openModal is not a function

问题

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.com/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();

回答1:

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();

回答2:

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');

回答3:

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()

来源：https://stackoverflow.com/questions/40083395/materializecss-modal-error-openmodal-is-not-a-function

标签

javascript

jquery

material-design

materialize