Question

我为物化模态编写了一个简单的代码 HTML code：

<a class="waves-effect waves-light btn view" data-target="modal1">View Scores</a>
<!-- 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>

JS代码：

$(document).ready(function() {
  // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
  /*$('.view').click(function (){
    $('#modal1').modal('open'); 
    alert('edskjcxnm');
  });*/
  /*$('.view').leanModal();*/
  $('#modal1').modal('open');
});

JSFiddle链接：https://jsfiddle.net/7f6hmgcf/
为什么不起作用？

Answer 1

首先初始化所有模态。 $('.modal').modal();

完整代码将如下所示

(function ($) {
    $(function () {

        //initialize all modals           
        $('.modal').modal();

        //now you can open modal from code
        $('#modal1').modal('open');

        //or by click on trigger
        $('.trigger-modal').modal();

    }); // end of document ready
})(jQuery); // end of jQuery name space

Answer 2

不是100％肯定你在这里要求的是什么，但如果你问的是如何在点击按钮上触发模态，你可以通过设置这样的onclick来实现：

$localStorage.token

但是你可以做$（'＃modal1'）。modal（'open'）;你需要在js中启动模态，如下所示：

<a class="waves-effect waves-light btn view" onclick="$('#modal1').modal('open');">View Scores</a>

您可以查看我的解决方案：https://jsfiddle.net/AndreasMolle/7f6hmgcf/13/

另一种解决方案可能是这样做：

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

Answer 3

Materialisecss文档太清楚我也有点挣扎，这就是我如何解决我的问题。

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

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

 <script>
 $(document).ready(function(){
 // the "href" attribute of .modal-trigger must specify the modal ID that   wants to be triggered
 $('.modal-trigger').leanModal();
 });
  </script>

Answer 4

我最近将我的项目更新为materializecss 0.98.0，使用此版本我需要在打开之前初始化模式。

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

//New
$('#modal1').modal().modal('open');

我找不到任何类似＆＃34; autoOpen＆＃34;的配置。关于模态初始选项：（。

Answer 5

$( document ).ready(function() {
  $('.modal').modal();
  $('#modal1').on('click', function() {
  });
});

https://jsfiddle.net/juands/z512cb7f/3/点击此链接

Answer 6

尝试Materialize.Modal类

let modal=new Materialize.Modal($("#yourModal"));

modal.open(); //Open it on some event

modal.close(); //This is not needed as you can close it with the modal buttons. It's tricky

物化模态不起作用

6 个答案: