web-dev-qa-db-ja.com

ユーザーが閉じるbtnをクリックしたときにのみマテリアライズモーダルを閉じる方法は？

ユーザーが閉じるボタンをクリックしたときにのみモーダルを閉じたい。 Bootstrapでこれを行う方法を知っています。マテリアライズをお手伝いできますか？

modal-dialogmaterialize
6
Brightest.Sirius

ページ下部にあるオプション Here を使用して、Materializeモーダルの動作をカスタマイズできます。

オプションdismissibleをfalseに変更します（デフォルトではモーダルプラグインはtrueです）。したがって、モーダルはcloseボタンをクリックしたときにのみ閉じます。

$('.modalselector').leanModal({
      dismissible: false
);

モーダルの例

$(document).ready(function(){
        $('.modal-trigger').leanModal({
                dismissible: false
        });
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
<!-- 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">Close</a>
  </div>
</div>
10
Shehary

$(document).ready(function(){ $('#modal1').openModal({ dismissible:false }); });

これを試してみてください

4
Tauseef

次のコードでモーダルを閉じることができます：

$('#modalname').closeModal(); or  $('#modalname').modal('close');
3
Wouter Schoofs

どの方法もうまくいきませんでした。しかし、これは、

$('#modal1').closeModal({ dismissible: true});
1
Chandan Purohit

同様のことをする必要が出てきたので、それを探している他の人にもこれを共有します。私はマテリアライズ1.0.0を使用していますが、上記の提案はどれもうまくいきませんでした。基本的に、モーダルの「dismissible」プロパティを制御して、いつでもどこからでも変更できるようにしたいのですが、モーダルが開いている前でも後でもかまいません。私が見つけた最もエレガントな方法は、この方法で行うことでした。これは、ユーザーがその領域の外側をクリックしたときにモーダルの動作が消えないように制御します。

    var m = M.Modal.getInstance(modal);
    m.options.dismissible = true|false;

ここで、モーダルparamはモーダルdivです。

お役に立てば幸いです。

0
Kalabaaz

Data-backdropプロパティを静的に設定するだけです。

0
Frawel

LeanModal（）、openModal（）、およびcloseModal（）はすべて私にとって失敗しました。それ以来、状況は変わったに違いありません。代わりに：

$("#modal1").modal({
    dismissible: false
  });

またはモーダルをもう一度呼び出すだけでも：

$("#modal1").modal();
0
mac

以下のコードは私のために働きました。

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

参照： materializecss

0
Captain Sparrow

モーダルを閉じるためのボタンを挿入するだけの場合（CSSの競合によりモーダルを閉じることができない場合があります）は、次のようにします。

<span 
   class="modal-action modal-close"
   style="float:right; font-size:30px;" 
   onclick="$('#myModal2').closeModal();"
>
X
</span>
0
Snehil Wani