如何在 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>

Answer 3

我将 MDL 与 bootstrap 一起使用，并且在将 data-backdrop 属性添加到模态元素后，模态显示正确：

<dialog data-backdrop="false">

希望对你有帮助！