web-dev-qa-db-ja.com

マテリアライズが機能しない

モーダルを具体化するための簡単なコードを書きました。
HTMLコード：

<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/
なぜ機能しないのですか？

javascriptjquerymaterialize
12
Ajay Kulkarni

最初にすべてのモーダルを初期化します。 $('.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
28
Alexey

ここで何を求めているのか100％はわかりませんが、あなたが求めているのがボタンクリックでモーダルをトリガーする方法である場合、次のようにonclickを設定するだけでそれを行うことができます：

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

ただし、$（ '＃modal1'）。modal（ 'open'）;を実行する前に次のように、jsでモーダルを開始する必要があります。

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

このフィドルで解決策を確認できます。 https://jsfiddle.net/AndreasMolle/7f6hmgcf/13/

別の解決策は、次のようにすることです。

<a class="waves-effect waves-light btn view" href="#modal1">View Scores</a>
4
Andreas Moldskred

Materializecssのドキュメントはあまりにも明確ではなく、少し苦労しました。ここで問題を解決しました。

  <!-- 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>
2
Alfred Alfizo Mosima

最近、プロジェクトをmaterializecss 0.98.0に更新しました。このバージョンでは、モーダルを開く前に初期化する必要があります。

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

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

モーダル初期オプションで「autoOpen」のような設定が見つかりません:(。

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

https://jsfiddle.net/juands/z512cb7f/3/ このリンクを確認してください

1
Juan Diego Silva

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