web-dev-qa-db-ja.com

マテリアルデザインライトでモーダルポップアップを使用する方法

最近、Google Material Design Liteの最新のデスクトップバージョンを使い始めました。モーダルポップアップがなく、次のリリースではまだ実装されていません。

私はbootstrapモデルをそれに含めようとしましたが、それが機能していないので感染がかなり混乱しているようです、クラス/スタイルが互いに衝突していると信じています。

何が代替品としてうまくいくのでしょうか？

ご協力いただきありがとうございます。

modal-dialogmaterial-designmaterial-design-lite
9
foo-baar

私も同様のプラグインを探していたところ、mdl-jquery-modal-dialogが見つかりました

https://github.com/oRRs/mdl-jquery-modal-dialog

私が見つけたもう1つはIE11で問題があったため、これを使用しました。これはうまくいきます。

<button id="show-info" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
    Show Info
</button>

ここにJSFiddle： https://jsfiddle.net/w5cpw7yf/

7
Suyash

このための純粋なJavaScriptソリューションを思いついた

ボタンのデフォルトのbootstrapデータ属性を使用して、ボタンとモーダルに固有のIDがあることを確認できます。

このJavaScriptを使用する前に、Material Design LiteのJSを含める必要があります

コードを確認してください。レビューは大歓迎です。 :)

// Selecting all Buttons with data-toggle="modal", i.e. the modal triggers on the page
var modalTriggers = document.querySelectorAll('[data-toggle="modal"]');

// Getting the target modal of every button and applying listeners
for (var i = modalTriggers.length - 1; i >= 0; i--) {
  var t = modalTriggers[i].getAttribute('data-target');
  var id = '#' + modalTriggers[i].getAttribute('id');

  modalProcess(t, id);
}

/**
 * It applies the listeners to modal and modal triggers
 * @param  {string} selector [The Dialog ID]
 * @param  {string} button   [The Dialog triggering Button ID]
 */
function modalProcess(selector, button) {
  var dialog = document.querySelector(selector);
  var showDialogButton = document.querySelector(button);

  if (dialog) {
    if (!dialog.showModal) {
      dialogPolyfill.registerDialog(dialog);
    }
    showDialogButton.addEventListener('click', function() {
      dialog.showModal();
    });
    dialog.querySelector('.close').addEventListener('click', function() {
      dialog.close();
    });
  }
}
<!-- Button to trigger Modal-->
<button class="mdl-button mdl-js-button" id="show-dialog" data-toggle="modal" data-target="#upload-pic">
        Show Modal
</button>

<!-- Modal -->
<dialog id="upload-pic" class="mdl-dialog mdl-typography--text-center">
  <span class="close">&times;</span>
  <h4 class="mdl-dialog__title">Hello World</h4>
  <div class="mdl-dialog__content">
    <p>This is some content</p>
  </div>
</dialog>
2
Valentino Pereira

bootstrapでMDLを使用しており、モーダル要素にdata-backdrop属性を追加すると、モーダルが正しく表示されます。

<dialog data-backdrop="false">

それが役に立てば幸い！

0
HomerBailon