What it can do?


Easy Modal for bootstrap, is a simple way to create modal dialogs using javaScript. This isn't bootstrap, is a helper to use modals.

Bootstrap and jQuery are dependencies to eModal.js.

Ajax

You must get the message from a remote server? No problem!

Alert

Traditional alert box. Using only text or a lot of magic!?

Confirm

Get an okay from user, has never been so simple and clean!

Prompt

Do you have a question for the user? We take care of it...

iFrame

IFrames are hard to deal with it? We don't think so!



Ajax


eModal.ajax(), allows you to get remote views into your modal fast and easy!


XHR Title

100% Complete

Loading Stage

XHR Title

XHR Fail: Url [http://yourUrl.net/content] load fail.

Error Stage

XHR Title


Success Stage

How to use

Simple way - Default title
var url = "/views/portview.html";
eModal.ajax(url);
Simple way - Custom title
var url = "/views/portview.html";
eModal.ajax(url, "XHR Title");
Tip: You can add custom buttons to footer!
Full custom modal
var options = {
        url: "/views/portview.html",
        title:'Header title',
        size: eModal.size.sm,
        subtitle: 'smaller text header',
        buttons: [
            {text: 'OK', style: 'info',   close: true, click: eventA },
            {text: 'KO', style: 'danger', close: true, click: eventB }
        ],
        ...
    };

eModal.ajax(options);

By default, the ajax modal has not buttons defined! The loading animation setup is a 'progress-bar-striped' from bootstrap, however, you can customize it by changing the eModal default settings with your custom html loading template.

EXAMPLE USING FONT AWESOME 
eModal.setEModalOptions({
        loadingHtml: 'Loading',
        ...
    });

Loading example

Loading

Alert


eModal.alert(), this launch a non blocking alert, using a bootstrap modal!


Alert modal

An amazing message!

How to use

Simple way - Default title
var message = "Hello World!";

eModal.alert(message);
Simple way - Custom title
var url = "Hello World!";
var title = "Alert Title";

eModal.ajax(message, title);
Tip: You can use DOM elements as messages!
Message using DOM element
var options = {
        message: $("#my-element-id"),
        title: 'Header title',
        size: 'lg',
        subtitle: 'smaller text header',
        useBin: true
        ...
    };

eModal.alert(options);
The element whit id 'my-element-id' will be moved to dialog body and according with parameter 'useBin' it will be deleted or recycle. When 'useBin' is true, after close the dialog, the element will be sent to a '#recycle-bin' container and all events will be preserved. If false, it will be deleted and it will not be possible to reuse the same element.

Confirm


eModal.confirm(), do you need a true or false user feedback? There is a nice way to do it!


Confirm modal

Is this dialog cool?

How to use

Simple way - Default title
var message = "Hello World!";

eModal.confirm(message, null)
      .then(callback, callbackCancel);
Simple way - Custom title
var url = "Hello World!";
var title = "Alert Title";

eModal.confirm(message, title)
       .then(callback, callbackCancel);
Tip: You can use change the default label name! { label: 'Yes' | 'True'| 'OK' }
Message using alternative label
var options = {
        message: "The famous question?",
        title: 'Header title',
        size: eModal.size.xl,
        subtitle: 'smaller text header',
        label: "True"   // use the positive label as key
        ...
    };

eModal.confirm(options)
      .then(callback, callbackCancel);
The callback is a mandatory argument, if it is not provided, the dialog will open, however, when on hidden, it will throw an exception. Callback event will retrieve a boolean argument as the standard JavaScript confirm.

Prompt


eModal.prompt(), do you what prompt a question? A simple form is ready!


Prompt modal

How to use

Simple way - Default title
var message = "Hello World!";

eModal.prompt(message, null);
      .then(callback, callbackCancel);
Simple way - Custom title
var url = "Hello World!";
var title = "Alert Title";

eModal.prompt(message, title, callback);
      .then(callback, callbackCancel);
Tip: You can use the title as the prompt question!
Message using alternative label
var options = {
        message: "The famous question?",
        title: 'Header title',
        size: eModal.size.lg,
        subtitle: 'smaller text header'
        ...
    };

eModal.prompt(options)
      .then(callback, callbackCancel);
The callback is a mandatory argument, if it is not provided, the dialog will open, however, when on hidden, it will throw an exception. Callback event will retrieve a boolean argument as the standard JavaScript confirm.

Do you see what I mean?

Add some compelling information here

Options

Name type default description
title string 'Attention' The header title string
message string, DOM object or jQuery object The body message string or the HTML element. e.g.: $(selector)
subtitle string The header subtitle string. This appear in a smaller text
size string Defines the size of modal ['sm' | 'lg' | 'xl']
loading bool false set loading progress as message
useBin bool false set message as recyclable
css object css object try apply into message body; only able if message == string
buttons Array of objects An array of objects to configure buttons to modal footer