How to use Modal Pop up with Material Design Lite?

Question

I recently started using the latest Desktop version of Google Material Design Lite, I figured it doesn't have a modal pop up and the team has not yet implemented it for the next release.

I have tried to include bootstrap model into it, but thats not working infect seems pretty messed, I believe with the classes/styles clashing with each others.

Any Idea what will work good as an replacement ??

Thanks for your help.

Answer 1

I was also looking for a similar plugin and then I found mdl-jquery-modal-dialog

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

I used this because the other one I found was having issue on IE11. This one works fine.

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

Answer 2

I came up with a pure JavaScript Solution for this

You can use the default bootstrap data attributes for the buttons, and make sure that your buttons and modals have their own unique IDs.

You need to have Material Design Lite's JS included before using this JavaScript

Check out the code. Any reviews are welcomed. :)

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