modal-dialog - Material Design Lite でモーダル ポップアップを使用するには?

Question

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

私はそれにブートストラップモデルを含めようとしましたが、感染がうまくいかないのはかなり混乱しているようです.クラス/スタイルが互いに衝突していると思います.

代わりに何がうまくいくのでしょうか??

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

Answer 1

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

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

私が見つけた他のものは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/

Answer 2

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

ボタンにデフォルトのブートストラップ データ属性を使用し、ボタンとモーダルに独自の一意の 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>