How to use Modal Pop with Material Design Lite?

Question

I recently started using the latest version of Desktop Material Lite for the desktop, I assumed that it did not have a modal popup, and the team had not yet implemented it for the next version.

I tried to include a boot model in it, but it doesn’t work, it seems that the infection seems quite confusing, I believe that the classes / styles conflict with each other.

Any idea what would work well as a replacement?

Thank you for your help.

Answer 1

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

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

I used this because the other I found had a problem in IE11. It works great.

<button id="show-info" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"> Show Info </button> 

Here's JSFiddle: https://jsfiddle.net/w5cpw7yf/

Answer 2

I came up with a clean JavaScript solution for this

You can use bootstrap data attributes for buttons and make sure your buttons and modals have their own unique identifiers.

Before using this JavaScript, you must use Material Design Lite JS

Check the code. Any feedback is welcome. :)

 // Selecting all Buttons with data-toggle="modal", ie 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

I am using MDL with bootstrap and the modal is displayed correctly after adding the data-backdrop attribute to the modal element:

 <dialog data-backdrop="false"> 

Hope this helps!