对话框/Tips
eModal - 实用模态窗口对话框插件
PetitQ
eModal 是一款非常实用的基于 Bootstrap 的模态窗口对话框插件。该模态窗口对话框插件可以制作警告框，确认框，提示框等，并且可以通过 Ajax 远程加载内容，还可以嵌入 iframe 框架等，功能非常齐全。
使用方法：
使用 eModal 模态窗口对话框需要引入 bootstrap 相关文件和 eModal.min.js 文件。
也想出现在这里？联系我们吧
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/eModal.min.js"></script>
Ajax 调用：
你可以通过 Ajax 在对话框中加载远程的资源。基本的调用方法如下：
var url = "/views/portview.html";
eModal.ajax(url);
你还可以自定义一个标题。
var url = "/views/portview.html";
eModal.ajax(url, "XHR Title");
另外你还可以在对话框的下方自定义按钮。完整的代码如下：
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);
默认情况下，Ajax 模态窗口是没有按钮的。还有加载动画是通过 Bootstrap 的 progress-bar-striped 来设置的，你也可以自定义你自己的 loading 加载动画效果。例如下面是使用 Font awesome 字体图标来制作 loading 加载动画。
警告框(alert)：
通过 eModal.alert()方法可以生成一个基于 Bootstrap 模态窗口的确认框。
var message = "Hello World!";
eModal.alert(message);
或者自定义标题。
var url = "Hello World!";
var title = "这是一个标题";
eModal.ajax(message, title);
你可以使用任何的 DOM 元素来作为对话框信息的内容。
var options = {
message: $("#my-element-id"),
title: 'Header title',
size: 'lg',
subtitle: 'smaller text header',
useBin: true
...};
eModal.alert(options);
#my-element-id 是信息元素的 ID 号。useBin 如果设置为 true，那么在对话框关闭之后，元素会被放置到一个#recycle-bin 的容器中，并且所有的事件都会被保存。如果设置为 false，那么元素会被删除，就不能在获取到同一个元素。
确认框(confirm)：
通过 eModal.confirm()方法可以弹出一个确认框。
var message = "Hello World!";
eModal.confirm(message, null)
.then(callback, callbackCancel);
// 带标题var url = "Hello World!";
var title = "Alert Title";
eModal.confirm(message, title)
.then(callback, callbackCancel);
你可以修改默认的标签：{ label: 'Yes' | 'True'| 'OK' }。
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);
callback 是强制性的参数，如果未设置则对话框关闭时会抛出一个异常。Callback 回调函数会接收一个布尔值参数。
提示框(Prompt)：
通过 eModal.prompt()方法可以生成一个消息提示框。
var message = "Hello World!";
eModal.prompt(message, null);
.then(callback, callbackCancel);
// 带标题var url = "Hello World!";
var title = "Alert Title";
eModal.prompt(message, title, callback);
.then(callback, callbackCancel);
你可以使用标题作为提示的信息。
var options = {
message: "The famous question?",
title: 'Header title',
size: eModal.size.lg,
subtitle: 'smaller text header'
...};
eModal.prompt(options)
.then(callback, callbackCancel);
配置参数：
| 参数 | 类型 | 默认值 | 描述 |
| title | string | 'Attention' | 对话框的标题 |
| message | string,DOM 元素或 jQuery 对象 | 对话框的内容 | |
| subtitle | string | 子标题 | |
| size | string | 模态对话框的大小，可以是：'sm' | 'lg' | 'xl' | |
| loading | boolean | false | 设置 loading 信息 |
| useBin | boolean | false | 设置是否回收信息内容 |
| css | object | 附加到信息内容上的 css 样式，只有 message == string 时有效 | |
| buttons | 数组对象 | 用于配置模态窗口底部的按钮 |
eModal 模态窗口对话框插件的 github 地址为：https://github.com/saribe/eModal
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
