openModal不是一个函数

MaterializeCss modal Error openModal is not a function

本文关键字：一个 函数 openModal      更新时间：2023-09-26

我有所有的要求Jquery, Materialize. Js坐在我的Js文件之上，但我得到警告openModal不是一个函数..我检查了模态名称是正确的，我可以运行Materialize。我知道Materialize.js正在工作。用按钮触发也不会调用模态。代码如下:

脚本:

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

触发:

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

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

Materialize functions需要Jquery元素
getElementById() -给我们DOM对象。

//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，我有同样的问题，我通过改变调用来打开模态和初始化来修复它。

如果你和我有同样的问题，请查看这里的最新文档

这可能是新的-这里没有使用openModal()。

初始化:

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

我添加了try/catch，因为有时不需要。

实现:

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

导入到materialize/dist文件夹，而不是materialize/js。

运行:$ (' # elementId ') .modal ();$ (' # elementId ') .modal("秀");

就是这样工作的。

编辑:

实际上，它在生产环境中不起作用。

所以我这样做了:

(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 ));
使用:$('#modal').showModal()
相关文章：