Layer

TODO

• 自定义对话框和遮罩层的 z-index
• 自定义遮罩层 background-color

Usage

可以通过两种方式来初始化 Layer 控件, 你可以根据自己的需要来进行选择. 另外, 对话框的关闭也非常方便.

Via data attributes

无需写 JavaScript , 即可启用对话框. 在一个触发元素（比如按钮）上设置 data-toggle="layer" , 然后通过 data-target="#ID" 指定一个对应的要打开的弹出层.

<button type="button" data-toggle="layer" data-target="#layer">打开</button>

Via JavaScript

直接在对应的弹出层 DOM 上调用即可.

$('#layer').layer(options);

data-dismiss="layer"

除了下文中将会提到的隐藏对话框的 JS 方法外, 你也可以在对话框的某个（或某些）DOM元素上配置 data-dismiss="layer" 来达到目的

<div id="layer" class="layer" style="display:none;">
  <i data-dismiss="layer">关闭</i>
  <div class="layer-content">内容</div>
</div>

Options

参数可以通过 data attributes 或者 JavaScript 两种方式来配置.

Name | Type | Default | Description ---- | ---- | ------- | ----------- keyboard | boolean | true | 是否支持 ESC 关闭. backdrop | boolean or the string 'lock' | true | 是否创建遮罩层. 默认点击遮罩层可以关闭对话框, 当值为 'lock' 时，不支持点击遮罩层关闭对话框. opacity | number | 0.5 | 遮罩层的透明度, 0 到 1 之间的浮点数. show | boolean | true | 初始化时是否打开对话框. time | number | 0 | 自动关闭, 默认不自动关闭, 可以配置毫秒数表示关闭时间

Methods

.layer(options)

初始化当前 DOM 内容为一个对话框, 可以接受参数进行配置.

$('#layer').layer({
  keyboard: false
});

.layer('show')

手动打开对话框. 该方法运行结束并不代表对话框已真实显示, 如果需要在真实显示后执行代码, 可以使用后面的自定义事件.

$('#layer').layer('show');

.layer('hide')

手动关闭对话框. 该方法运行结束并不代表对话框已真实显示, 如果需要在真实显示后执行代码, 可以使用后面的自定义事件.

$('#layer').layer('hide');

.layer('toggle')

手动打开或者关闭. 该方法运行结束并不代表对话框已真实显示, 如果需要在真实显示后执行代码, 可以使用后面的自定义事件.

$('#layer').layer('toggle');

.layer('handleUpdate')

手动调整对话框的位置, 常用于对话框尺寸发生变化的情况.

$('#layer').layer('handleUpdate');

Event

Event Type | Description ---------- | ----------- show.fe.layer | 当 show 方法被调用, 此事件会立即触发. 如果是通过点击按钮打开的, 则可以通过事件对象的 relatedTarget 获取到点击按钮. shown.fe.layer | 对话框已呈现完毕时触发. hide.fe.layer | 当 hide 方法被调用, 此事件会立即触发. 如果是通过点击按钮打开的, 则可以通过事件对象的 relatedTarget 获取到点击按钮. hidden.fe.layer | 对话框已隐藏完毕时触发.

$('#layer').on('show.fe.layer', function (e) {
  // 阻止对话框打开
  e.preventDefault();

  // 如果是通过点击按钮打开的，则可以获取到点击按钮
  e.relatedTarget;
});

End

Thanks to Bootstrap