mzbox.alert('Hello from the box #1');

mzbox.alert('Hello from the box #2', 'Oh... Hi');

mzbox.alert('Hello from the box #3', 'Oh... Hi', function(){ alert('Thank You'); });

mzbox.alert({
  title: 'Oh... Hi',
  message: 'Hello from the box #4'
});

mzbox.confirm('Are you sure #1?');

mzbox.confirm('Are you sure #2?', 'Confirmation');

mzbox.confirm('Are you sure #3?', 'Confirmation', function(res){ alert(res); });

mzbox.confirm({
  title: 'Confirmation',
  message: 'Are you sure #4?',
  callback: function(res){
      alert(res);
  }
});

mzbox.prompt('What is your name #1?');

mzbox.prompt('What is your name #2?', 'Identity');

mzbox.prompt('What is your name #3?', 'Identity', 'Iqbal Fauzi');

mzbox.prompt('What is your name #4?', function(res){ alert(res); });

mzbox.prompt('What is your name #5?', 'Identity', function(res){ alert(res); });

mzbox.prompt('What is your name #6?', 'Identity', 'Iqbal', function(res){ alert(res); });

mzbox.prompt({
  title: 'Identity',
  message: 'What is your name #7?',
  callback: function(res){
      alert(res);
  }
});

mzbox.prompt({
  title: 'Identity',
  message: 'What is your name #8?',
  input: {
      type: 'text',
      label: 'Fullname'
  },
  callback: function(res){
      alert(res);
  }
});

mzbox.prompt({
  title: 'Identity',
  message: 'What is your name #9?',
  input: {
      type: 'text',
      value: 'Iqbal Fauzi'
  },
  callback: function(res){
      alert(res);
  }
});

mzbox.prompt({
  title: 'Company',
  message: 'What is your company name #10?',
  input: {
      type: 'text',
      options: [
          { text: "Apple" },
          { text: "Google" },
          { text: "Microsoft" },
          { text: "Samsung" }
      ]
  },
  callback: function(res){
      alert(res);
  }
});

mzbox.prompt({
  title: 'Contact',
  message: 'What is your phone number #11?',
  input: {
      type: 'tel'
  },
  callback: function(res){
      alert(res);
  }
});

The validation here implement MaterializeCSS validation that validate the input on user leave focus from the input.

mzbox.prompt({
  title: 'Contact',
  message: 'What is your website #12?',
  input: {
      type: 'url'
  },
  callback: function(res){
      alert(res);
  }
});

mzbox.prompt({
  title: 'Contact',
  message: 'What is your website #13?',
  input: {
      type: 'textarea',
      label: 'About You',
      value: 'lorem\nipsum\nsit\ndolor\namet'
  },
  callback: function(res){
      alert(res);
  }
});

mzbox.prompt({
  title: 'Contact',
  message: 'What is your city #14?',
  attrs: {
      style: 'height:450px',
      class: 'modal-fixed-footer'
  },
  input: {
      type: 'select',
      label: 'Your City',
      value: 'jakarta',
      options: [
          {
              text : 'Jakarta',
              value: 'jakarta',
              group: 'DKI Jakarta',   // optional
              icon : 'http://via.placeholder.com/40x40' // optional
          },
          {
              text : 'Bogor',
              value: 'bogor',
              group: 'Jawa Barat',   // optional
              icon : 'http://via.placeholder.com/40x40' // optional
          },
          {
              text : 'Bandung',
              value: 'bandung',
              group: 'Jawa Barat',   // optional
              icon : 'http://via.placeholder.com/40x40' // optional
          }
      ]
  },
  callback: function(res){
      alert(res);
  }
});

mzbox.prompt({
  title: 'Contact',
  message: 'What is your provider #15?',
  attrs: {
      style: 'height:450px',
      class: 'modal-fixed-footer'
  },
  input: {
      type: 'select',
      label: 'Your City',
      attrs: {
          multiple: true
      },
      value: ['simpati', 'im3'],
      options: [
          {
              text : 'Simpati',
              value: 'simpati'
          },
          {
              text : 'XL',
              value: 'xl'
          },
          {
              text : 'IM3',
              value: 'im3'
          },
          {
              text : '3',
              value: '3'
          }
      ]
  },
  callback: function(res){
      alert(res);
  }
});

mzbox.prompt({
  title: 'Identity',
  message: 'How old are you #16?',
  input: {
      type: 'range',
      attrs: {
          min: 25,
          max: 70
      },
      value: '30'
  },
  callback: function(res){
      alert(res);
  }
});

Please refer to MaterializeCSS Range for more information about various options and implemention. As this element require manual installation for js and css of noUiSlider.

mzbox.prompt({
  title: 'Range',
  message: 'How far is somewhere from your location #17?',
  input: {
      type: 'slider',
      value: '30',
      instance: {
          start: [20, 80],
          connect: true,
          step: 1,
          orientation: 'horizontal',
          range: {
              min: 0,
              max: 100
          },
          format: wNumb({
              decimals: 0
          })
      }
  },
  callback: function(res){
      alert(res);
  }
});

mzbox.prompt({
  title: 'Gender',
  message: 'Please be in the options #18?',
  input: {
      type: 'radio',
      value: 4,
      options: [
          { text: 'Male', value: 1 },
          { text: 'Female', value: 2 },
          { text: 'Apache Helicopter', value: 3 },
          { text: 'Undefined', value: 4 }
      ]
  },
  callback: function(res){
      alert(res);
  }
});

mzbox.prompt({
  title: 'Drink',
  message: 'What do you drink #19?',
  input: {
      type: 'checkbox',
      value: [1,3],
      options: [
          { text: 'Coca Cola', value: 1 },
          { text: 'Sprite', value: 2 },
          { text: 'Fanta', value: 3 },
          { text: 'Teh Pucuk', value: 4 }
      ]
  },
  callback: function(res){
      alert(res);
  }
});

The callback will get 1 for active switch, and 0 for inactive switch. Please compare data type on your logic for inactive state or user clicking cancel button.

mzbox.prompt({
  title: 'Activate',
  message: 'Would you like to activate it? #20',
  input: {
      attrs: {
          checked: 'checked'
      },
      type: 'switch',
      text: {
          before: 'Disabled',
          after : 'Enable'
      }
  },
  callback: function(res){
      alert(res);
  }
});

mzbox.dialog({
  message: 'Cool hah #1?'
});

mzbox.dialog({
  title: 'Im Alert',
  message: 'Cool hah #2?',
  buttons: {
      ok: {
          label: 'OK',
          default: true
      }
  }
});

mzbox.dialog({
  title: 'Confirmation',
  message: 'Are you sure #3?',
  callback: function(res){ alert(res); },
  buttons: {
      cancel: {
          label: 'CANCEL'
      },
      confirm: {
          label: 'CONFIRM',
          default: true
      }
  }
});

mzbox.dialog({
  title: 'Information',
  message: 'Your name please #3?',
  callback: function(res){ alert(res); },
  input: {
      type: 'text',
      label: 'Fullname'
  },
  buttons: {
      cancel: {
          label: 'CANCEL'
      },
      confirm: {
          label: 'CONFIRM',
          default: true
      }
  }
});

let progress = document.createElement('div')
progress.classList.add('progress')
 
let indeterminate = document.createElement('div')
indeterminate.classList.add('indeterminate')
 
progress.appendChild(indeterminate)

let box = mzbox.dialog({
  dismissible: false,
  message: progress
});
 
setTimeout(function(box){
  box.close();
}, 3000, box);

mzbox.dialog({
  title: 'Are you sure #4?',
  callback: function(res){
      alert(res);
  },
  buttons: {
      cancel: {
          label: 'CANCEL'
      },
      doubt: {
          label: 'Doubt',
          callback: function(){ alert('In doubt'); }
      },
      confirm: {
          label: 'CONFIRM',
          default: true
      }
  }
});

/**
 * @param string name The language name.
 * @param object translation key-value pair of translation.
 * @return object mzbox
 */

Add new translation to the system translation. List of words to be exists: OK, CONFIRM, CANCEL. This method is also used to replace exists translation.

mzbox.addLocale('es', {
  OK: 'OK',
  CANCEL: 'Cancelar',
  CONFIRM: 'Aceptar'
});

/**
 * @param object options The alert options.
 *
 * @param string message The box message.
 * @param string title The box title.
 * @param function callback The on close callback function.
 *
 * @return object box
 */

Show standart alert.

let message  = 'Hello from the box';
let title    = 'Oh... Hi!';
let callback = function(){ alert('Thankyou'); }
 
mzbox.alert(message, title, callback);
// mzbox.alert(message);
// mzbox.alert(message, title);
// mzbox.alert(message, callback);
// mzbox.alert(message, title, callback);
// mzbox.alert({message, title, callback});

/**
 * @param object options The confirm options.
 * 
 * @param string message The box message.
 * @param string title The box title.
 * @param function callback The on close callback function.
 *
 * @return object box
 */

Show standart confirm.

let message  = 'Are you sure about that?';
let title    = 'Confirmation';
let callback = function(res){ 
  if(!res)
      alert('Uch...');
  else
      alert('Thankyou');
  };
 
mzbox.confirm(message, title, callback);
// mzbox.confirm(message);
// mzbox.confirm(message, title);
// mzbox.confirm(message, callback);
// mzbox.confirm(message, title, callback);
// mzbox.confirm({message, title, callback});

/**
 * @param object options Dialog options
 * @return object box
 */

Show custom dialog. All box methods ( alert, confirm, prompt ) basically call this method internally.

mzbox.dialog({
  title: 'Oh... Hi',
  message: 'Alert like dialog from custom dialog',
  input: null,
  buttons: {
      ok: {
          label: 'OK'
      }
  }
});

/**
* @param object options The prompt options.
*
* @param string message The box message.
* @param string title The box title.
* @param mixed value The input value.
* @param function callback The on close callback function.
* 
* @return object box
*/

Show standart prompt.

let message  = 'What is your name?';
let title    = 'Identity';
let value    = 'Iqbal Fauzi';
let callback = function(res){ 
  if(!res)
      alert('No value?');
  else
      alert('Your name is ' + res);
  }
 
mzbox.prompt(message, title, value, callback);
// mzbox.prompt(message);
// mzbox.prompt(message, title);
// mzbox.prompt(message, callback);
// mzbox.prompt(message, title, callback);
// mzbox.prompt(message, title, value);
// mzbox.prompt(message, title, value, callback);
// mzbox.prompt({message, title, value, callback});

/**
 * @param string The language name.
 * @return object mzbox
 */

Remove exists translation.

mzbox.removeLocale('id');

/**
 * @param object The key-value pair of option to set.
 * @return object mzbox
 */

Set default options.

mzbox.setDefaults({
  title: 'MZBox',
  locale: 'id',
  ...
});

/**
 * @param string The language name.
 * @return object mzbox
 */

Set default language to use.

mzbox.setLocale('id');

This is the only public method of each box for now. It close the box and remove the element related to the box.

let box = mzbox.alert('Hello from the box #2', 'Oh... Hi');
 
setTimeout(function(box){
    box.close();
}, 1000, box);

This property hold related .modal element.

let box = mzbox.alert('Awesome');
box.element;

This property hold related input element. It can be array of the object for input type checkbox and radio.

let box = mzbox.prompt('Awesome');
box.input;

This property hold the modal instance of materialize.

let box = mzbox.alert('Awesome');
box.instance; // M.Modal instance

List of box options.

let box = mzbox.alert('Awesome');
box.options;