Nice Material Design Modal Dialog Plugin With jQuery - MDL

MDL is a lightweight jQuery plugin used for displaying Google Material Design styled modal windows or dialog boxes on the webpage. A great alternative to the native JavaScript's alert / prompt / confirm dialog popups.

How to use it:

1. Load jQuery library and the jQuery MDL plugin' JavaScript & Stylesheet in the html file.

<link href="mdl.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script> 
<script src="mdl.js"></script>

2. Create a confirmation dialog on the screen. Note that you can pass the plugin options via data attribute like this:

<a class="btn" id="confirm-demo" 
   data-type="confirm" 
   data-fullscreen="false" 
   data-overlayClick="true">
   Confirm Dialog 
</a>

$('#confirm-demo').mdl({
  content:"Are You Sure?"
}, function(result){
  alert("result:" + result);
})

3. Create a prompt dialog on the screen.

<a class="btn" id="prompt-demo" 
   data-type="prompt" 
   data-fullscreen="false" 
   data-overlayClick="true">
   Prompt Dialog 
</a>

$('#prompt-demo').mdl({
  content:"What is your name?"
}, function(result){
  alert("result:" + result);
});

4. Create a modal / alert dialog that auto displays on page load and auto dismisses after 3 seconds.

<div class="mdl" id="modal-demo">
  <div class="mdl-container">
    Content goes here
  </div>
</div>

mdl_open('#modal-demo');
setTimeout(function(){ 
  mdl_close('#modal-demo');
}, 3000); 

5. You are able to create a trigger link to toggle the modal / alert dialog manually.

<a class="btn" id="btn-trigger" data-target="#modal-demo">
  Basic Modal / Alert Dialog 
</a>

$('#btn-trigger').mdl({
  type: 'modal'
});

6. Plugin's default config options.

$('#btn-trigger').mdl({

  // confirm,prompt,modal
  'type': "modal",    

  // enable fullscreen mode
  'fullscreen': "true", 

  // close the modal by clicking on the overlay
  'overlayClick':"false",

  // custom modal content
  'content':''
  
});

Change log:

2016-12-03

• JS & CSS update

---

This awesome jQuery plugin is developed by hellointeractiv. For more Advanced Usages, please check the demo page or visit the official website.