Minimal Flexible Modal Window Library – Modal.js

Preview:

Description:

Modal.js is a minimal, flexible, performant and customizable modal window library written in pure JavaScript.

How to use it:

Include the modal’s JavaScript and Stylesheet on the page.

<!-- include modal css -->
<link rel="stylesheet" href="style.css">
<!-- include modal js -->
<script type="text/javascript" src="modal.js" ></script>

Create a default modal window on the page.

var m = new amrza.Modal().show();

Customize the title & content of the modal window.

var m = new amrza.Modal({
    title:   "Title",
    text:    "no message here..."
}).show();

Customize the size & offset of the modal window.

var m = new amrza.Modal({
    y:       0,
    x:       0,
    width:   400,
    height:  250,
}).show();

RTL is supported as well.

var m = new amrza.Modal({
    rtl:     false
}).show();

Customize the action buttons.

var m = new amrza.Modal({
    ok: function(e, self) { 
      self.close(); 
    },
    yes: function(e, self) { 
      self.close(); 
    },
    no: function(e, self) { 
      self.close(); 
    },
    cancel: function(e, self) { 
      self.close(); 
    },
}).show();

Append custom HTML content to the modal window.

var m = new amrza.Modal({
    title: "Custom HTML"
})
.html(
  'String',
  '<p style="color:white; background:blue">This text is a custom p tag</p>',
  false
)
.show();