eMode是一个jQuery模式弹出插件，使用Bootstrap 4/3模式组件可以轻松显示AJAX/iframe弹出框和警告/确认/提示对话框。

如何使用它:

1.在文档中加载必要的jQuery库和Bootstrap框架。

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

2.在jQuery库之后加载jQuery eMode插件。

<script src="dist/eModal.js"></script>

3.按如下方式创建对话框：

var message = "Custom message here";
var title = "Hello World!";

// alert dialog
eModal
.alert(message, title)
.then(function () { 
  // do something
});

// confirm dialog
eModal
.confirm(message, title)
.then(
  function (/* DOM */) { 
    // Confirm
  },
  function (/*null*/) { 
    // Cancel
  }
);

// prompt dialog
eModal
.prompt({ 
  size: eModal.size.sm, 
  message: 'What\'s your name?', 
  title: title 
})
.then(
  function (input) { 
    // message: 'Hi ' + input + '!', title: title, imgURI: 'https://avatars0.githubusercontent.com/u/4276775?v=3&s=89' 
  },
  function () { 
    // error
});

// ajax popup
var params = {
    buttons: [
     { text: 'Close', close: true, style: 'danger' },
     { text: 'New content', close: false, style: 'success', click: ajaxDemo }
    ],
    size: eModal.size.lg,
    title: title,
    url: 'https://example.com/api/'
};
eModal
.ajax(params)
.then(function () { 
  // do something
});

// embed popup
// ideal for Google Maps, Youtube Videos, etc
params = {
  async: true,
  iframe: {
    url: 'https://www.youtube.com/embed/s8Iar_t7CW4',
    attributes: {
      'id': 'youtube',
      'allow': 'autoplay; encrypted-media',
      'allowfullscreen': true
    }
  },
  buttons: [
    {
      close: true,
      text: 'Close'
    }
  ],
  onHide: hiddenModal,
  useBin: true,
  binId: 'youtube-demo'
};
$.eModal
.embed(params, title)
.then(function(html){
  console.info('Video is visible.');
});

4.完整的插件选项。

var options = {

  // animation type
  animation: 'fade',

  // returns a Promise, that is resolved when the modal is closed
  async: false,

  // ajax options
  ajax: {
    'dataType': false, // string
    'error': false, // function
    'loading': false, // boolean
    'loadingHtml': LOADING, // string
    'success': false, // function
    'url': false, // string
    'xhr': {} // object
  },

  // unique identifier of the content saved in the recycle bin
  binId: false,
      
  // inline CSS styles
  bodyStyles: false,

  // custom buttons
  // Array, String, false, null
  buttons: [
    {text: 'Ok', style: 'info',   close: true, click: eventA },
    {text: 'KO', style: 'danger', close: true, click: eventB }
  ],

  // confirm options
  confirm: {
    'label': Object.keys(LABELS)[0],
    'style': []
  },

  // additional CSS classes
  cssClass: false,

  // shows footer
  footer: true,

  // shows header
  header: true,

  // shows close button in the header
  headerClose: true,
  headerCloseHtml: '<button type="button" class="x close" data-dismiss="modal" aria-label="Close">' +
    '<span aria-hidden="true">&times;</span>' + 
    '</button>', // string

  // height
  height: false, 
  id: false,

  // unique ID
  iframe: {
    'attributes': {},
    'loadingHtml': LOADING,
    'url': false
  },

  // message
  message: false,

  // Bootstrap modal options
  modalOptions: {},

  // close by clicking the overlay
  overlayClose: true,

  // onHide function
  onHide: false,

  // position
  position: ['top', 'center'],

  // prompt options
  prompt: {
    'autocomplete': false, // boolean
    'autofocus': false, // boolean
    'checkValidity': false, // boolean
    'label': Object.keys(LABELS)[0], // string
    'pattern': false, // string
    'placeholder': false, // string
    'required': true, // boolean
    'style': [], // array
    'type': 'text', // string
    'value': false // string
  },

  // small (sm), large (lg) and extra large (xl)
  size: EMPTY, 

  // subtitle
  subtitle: false,

  // title
  title: 'Attention',

  // If set to true, $.eModal keeps the content uploaded in the body element of the modal in a recycle bin can
  // So that it can be recalled without a new upload from the web
  useBin: false,

  // width
  width: false,

  // custom wrapper element
  wrapSubtitle: '<small>',
  wrapTitle': '<h5>', 

};

5.API方法。

// close
$.eModal.close

// add new labels
// it takes two arguments: confirm button label and reject button label
$.eModal.label

// return the jQuery object of the modal dialog
$.eModal.modal  

// return the Promise to be able to perform a resolve or reject.
$.eModal.defer  

// add a size to those provided by Bootstrap (sm, lg, xl)
$.eModal.size

// empty the recycle bin
$.eModal.emptyBin

更新日志：

v2.1.0版本（2022-05-19）

• 使现代化

v2.0.0版本（2022-05-17）

• 完全重新设计

v1.2.69 (2020-04-15)

• 固定用于引导程序4。

2018-12-21

• 使现代化

2018-12-20

• 已为jQuery 3+修复。
• 修复默认设置大小

2016-11-03

• 用ajax.done代替success

2016-11-02

• 添加滚动条

2016-01-19

• 将Q设置为AMD模块的选项

2015-11-13

• 修复第一次加载时$modal未定义的问题

2015-10-14

• 从jQuery延迟的eMode

预览截图

jQuery插件 Bootstrap模式增强 eMode