Question

我最近开始使用Google Material Design Lite的最新桌面版本，我认为它没有弹出模式，团队还没有为下一个版本实现它。

我试图将bootstrap模型包含在其中，但那些不起作用的感染似乎很混乱，我相信类/样式会互相冲突。

任何想法什么作为替代品都有用？

感谢您的帮助。

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">

希望它有所帮助！

如何使用Modal弹出Material Design Lite？

3 个答案: