Material Design Flexible Modal, Confirm & Prompt jQuery Plugin – jquery-mdl

by Posted on

Flexible modal, confirm & prompt jquery plugin.
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.
jquery-material-popup

Libraries

Include following libraries on page.

<link rel="stylesheet" href="dist/mdl.css" >
<script src="demo/libs/jquery.min.js"></script>
<script src="dist/mdl-min.js"></script>




Create simple modal using js configuration

<a class="mdl-btn" id="bt1" data-target="#modal1" >
modal by js
</a>
<div class="mdl" id="modal1">
	<div class="mdl-container">
			<h2>Rohit Kumar</h2>
			<p>Hello, I hope you are doing well, My name is Rohit Kumar and I am Programmer, Analyst, Blogger and Technology freak based in New Delhi, India.</p>
	</div>
</div>
<script>
$(function() {   
 $('#bt1').mdl({
	type: 'modal',
	fullscreen:false,
	overlayClick:true
 });
});
</script>

open simple modal box by setting data attribute

<a class="mdl-btn btns-modal" data-type="modal" data-target="#modal2" data-fullscreen="true" data-overlayClick="true" >
Simple modal fullscreen - Config by datas
</a>
<div class="mdl" id="modal2">
	<div class="mdl-container">
 
 
			<h2>Rohit Kumar</h2>
			<p>Hello, I hope you are doing well, My name is Rohit Kumar and I am Programmer, Analyst, Blogger and Technology freak based in New Delhi, India.</p>
	</div>
</div>
<script>
$(function() {   
 $('.btns-modal').mdl();
});
</script>




Confirm Box

<a class="mdl-btn btns-confirm" data-type="confirm" data-fullscreen="false" data-overlayClick="true" >
confirm
</a>
$('.btns-confirm').mdl({
	type:'confirm',
	fullscreen:false,
	overlayClick:false,
	content:"Are you sure?"
}, function(result){
	alert("result:" + result);
});

Prompt Box

<a class="mdl-btn btns-prompt" data-type="prompt" data-fullscreen="false" data-overlayClick="true" >
Prompt
</a>
$('.btns-prompt').mdl({
	type:'prompt',
	overlayClick:false,
	content:"what is the color of the white horse?"
}, function(result){
	alert("result:" + result);
});

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by hellointeractiv. Visit their official github repository for more information and follow for future updates.


Published by admin