Nice Material Design Modal Dialog Plugin With jQuery - MDL

File Size: 12.8 KB
Views Total: 8538
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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" 
   Confirm Dialog 
  content:"Are You Sure?"
}, function(result){
  alert("result:" + result);

3. Create a prompt dialog on the screen.

<a class="btn" id="prompt-demo" 
   Prompt Dialog 
  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
}, 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 
  type: 'modal'

6. Plugin's default config options.


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

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

  // close the modal by clicking on the overlay

  // custom modal content

Change log:


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