How to use Modal Pop up with Material Design Lite?

modal-dialog material-design material-design-lite
foo-baar picture foo-baar · Aug 18, 2015 · Viewed 20.9k times · Source

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

Suyash picture Suyash · Feb 6, 2016

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/

Related questions

Passing data to mdDialog

Main listing page has edit button. Which opens details of the edited row. Way-1: Now, if I set "ctrl.parent.q_details.client_location" it is bind with parent listing controller and it works as 2-way binding and automatically changes …

Read More
Close Bootstrap Modal

I have a bootstrap modal dialog box that I want to show initially, then when the user clicks on the page, it disappears. I have the following: $(function () { $('#modal').modal(toggle) }); <div class="modal" id='modal'> <…

Read More
Disable click outside of bootstrap modal area to close modal

I am making a bootstrap website, with a couple of Bootstrap 'Modals'. I'm trying to customize some of the default features. Problem is this; You can close the modal by clicking on the background. Is there anyway to disable this …

Read More