Materialize Dialog

A simple library tinked to easy Materialize JavaScript Modals

This

				
<div id="modal1" class="modal">
	<div class="modal-content">
		<h4>Alert</h4>
		<p>Hello</p>
	</div>
	<div class="modal-footer">
		<a href="#!" class="btn modal-close">Close</a>
	</div>
</div>

Can be simplified to 

				
MaterialDialog.alert("Hello");

Installation

Download the source here

Include materialize css and js in head.

				
<head>
	<link href="src/materialize/css/materialize.css" rel="stylesheet" type="text/css">
	<script src="src/materialize/js/materialize.js" type="text/javascript"></script>
	<script src="src/material-dialog.js" type="text/javascript"></script>
</head>

Material Dialog need materialize css and js

Usage

Alert

Usage Example

				
MaterialDialog.alert(
	'Message', // Alert Body (Acepts html tags)
	{
		title:'Alert Modal', // Modal title
		buttons:{ // Receive buttons (Alert only use close buttons)
			close:{
				text:'close', //Text of close button
				className:'red', // Class of the close button
				callback:function(){ // Function for modal click
					alert("hello")
				}
			}
		}
	}
);
Example

Options

Method Description
title Modal's Title
buttons
  • close
    • text
    • className
    • modalClose
    • callback

    • Receive de text of the close button
    • Receive close button class
    • true/false Closes modal on button click (default true)
    • Receive a function as callback for button click

Dialog

Usage Example

				
MaterialDialog.dialog(
	"Text here",
	{
		title:"Dialog Title",
		modalType:"modal-fixed-footer", // Can be empty, modal-fixed-footer or bottom-sheet
		buttons:{
			// Use by default close and confirm buttons
			close:{
				className:"red",
				text:"closed",
				callback:function(){
					alert("closed!");
				}
			},
			confirm:{
				className:"blue",
				text:"confirmed",
				modalClose:false,
				callback:function(){
					console.log("confirmed");
				}
			}
		}
	}
);
Example

Options

Method Description
title Modal's Title
buttons
  • close
    • text
    • className
    • modalClose
    • callback
  • confirm
    • text
    • className
    • modalClose
    • callback

    • Receive de text of the close button
    • Receive close button class
    • true/false Closes modal on button click (default true)
    • Receive a function as callback for button click

    • Receive de text of the close button
    • Receive close button class
    • true/false Closes modal on button click (default true)
    • Receive a function as callback for button click

Extra

In options part, you can pass any materialize modal property's, for more info check here

				
MaterialDialog.alert(
	'Message', // Alert Body (Acepts html tags)
	{
		title:'Alert Modal', // Modal title
		dismissible: false, // Modal can be dismissed by clicking outside of the modal
		opacity: .5, // Opacity of modal background
		inDuration: 300, // Transition in duration
		outDuration: 200, // Transition out duration
		startingTop: '4%', // Starting top style attribute
		endingTop: '10%', // Ending top style attribute
		onOpenStart: function(modal) { // Callback for Modal open
			console.log(modal);
		},
		onCloseEnd: function() { alert('Closed'); } // Callback for Modal close
	}
);
Example