Home

Welcome to the eModal wiki!

About eModal

Quick Start

Download and link eModal.js script : Ex: <script src="//mydomain.com/eModal/master/dist/eModal.min.js"></script>

Test the integration of eModal to display a modal for alert, for example.

// Display an alert modal with default titles (Attention)

eModal.alert('You shall not pass!');

Quick Usage

Create modal

Modal Alert

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

basic way : Default title

var message = "Hello World!";

eModal.alert(message);

basic way : Using custom title option

var url = "Hello World!";

var title = "Alert Title";

eModal.ajax(message, title);

Custom way : Message using DOM element

var options = {

   message: $("#my-element-id"),

   title: 'Header title',

   size: 'lg',

   subtitle: 'smaller text header',

   useBin: true

};

eModal.alert(options);

Modal confirmation

Modal with Ajax content

Modal Prompt

Modal options

Modal action examples

Button options

Buttons action examples

Options

• Name : title

  • type : string
  • default : 'Attention'
  • description : The header title string
    • Ex : title: 'My new modal dialog',

• Name : message

  • type : string, DOM object or jQuery object
  • default : ''
  • Description : The body message string or the HTML element. e.g.: $(selector)
    • Ex :

• Name : subtitle

  • type : string
  • default : ''
  • Description : The header subtitles string. This appears in a smaller text.
    • Ex :

• Name : size

  • type : string
  • default : ''
  • description : Defines the size of modal ['sm' | 'lg' | 'xl']
    • Ex : size: eModal.size.lg,

• Name : loading

  • type : bool
  • default : 'false'
  • description : set loading progress as message
    • Ex :

• Name : loadingHtml

  • type : bool
  • default : 'false'
  • description : set loading progress as message
    • Ex using [Font-Awesome] class (https://github.com/FortAwesome/Font-Awesome) : loadingHtml: '<span class="fa fa-circle-o-notch fa-spin fa-3x text-primary"></span><span class="h4">Loading</span>',

• Name : useBin

  • type : bool
  • default : 'false'
  • Description : set dialog to be deleted or recycled. When 'useBin' is true, after closing 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.
    • Ex : useBin: true,

• Name : css

  • type : object
  • default : 'false'
  • description : css object try applies into message body; only available if the message == string
    • Ex :

• Name : url

  • type : string
  • default : ''
  • Description : use Ajax to get data from this url. Content need to be HTML and like common body content (like between '...')
    • Ex : url: "/views/ajax_data.php",

• Name : buttons

  • type : object
  • default : ''
  • description : Array of objects
    • Ex : buttons: [ { text: 'Close', close: true, style: 'info pull-left' }, { text: 'Save',close: true, style: 'success' }],