如何在Material Design Lite中使用模态弹出框？

Question

我最近开始使用最新版本的Google Material Design Lite桌面版，发现它没有模态弹出框，并且团队还没有为下一个发布版本实施它。

我试图将Bootstrap模型包含在其中，但并不起作用，似乎非常混乱，我认为这些类/样式之间存在冲突。

有什么好的替代方案吗？

谢谢您的帮助。

- foo-baar

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>

Here a JSFiddle: https://jsfiddle.net/w5cpw7yf/

- Suyash

Answer 2

我为此提供了纯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>

- Valentino Pereira

---

好的。对我有效。谢谢。 - Love and peace - Joe Codeswell

Answer 3

我使用MDL与Bootstrap，添加data-backdrop属性到模态元素后，模态框正确显示：

<dialog data-backdrop="false">

希望能对你有所帮助！

- HomerBailon

---

我同意你的观点，但这样做会破坏使用其他UI框架的目的，相反一个人可以选择使用Bootstrap本身。顺便说一句，我通过使用http://dinbror.dk/bpopup/解决了这个问题。 - foo-baar