jQuery:Remodal对话框 jQuery Modal Dialog Boxes

主页:http://vodkabears.github.io/remodal/

项目地址:https://github.com/VodkaBears/Remodal

下载:Remodal-master

用法:

载入css和js文件

<link rel="stylesheet" href="../dist/remodal.css">
<link rel="stylesheet" href="../dist/remodal-default-theme.css">
<script src="../dist/jquery.min.js"></script>
<script src="../dist/remodal.min.js"></script>

modal框html代码

<div class="remodal" data-remodal-id="modal">
 <button data-remodal-action="close" class="remodal-close"></button>
 <h1>Remodal</h1>
 <p>
 Responsive, lightweight, fast, synchronized with CSS
 animations, fully customizable modal window plugin with
 declarative configuration and hash tracking.
 </p>
 <br>
 <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
 <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>

弹出remodal框

<a href="#modal">Call the modal with data-remodal-id="modal"</a>

Or:

<a data-remodal-target="modal">Call the modal with data-remodal-id="modal"</a>

Options

您可以使用data-remodal-options属性来对模态框进行额外的配置。

<div class="remodal" data-remodal-id="modal"
  data-remodal-options="hashTracking: false, closeOnOutsideClick: false">

  <button data-remodal-action="close" class="remodal-close"></button>
  <h1>Remodal</h1>
  <p>
    Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
  </p>
  <br>
  <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
  <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>

hashTracking

Default: true

默认使用锚点打开href=’#modal’,但你可以不是用它,用data-remodal-target属性来达到同样的目的。

<a data-remodal-target="modal" href="#">Call the modal with data-remodal-id="modal"</a>

closeOnConfirm 默认点击确认按钮关闭模态框。

Default: true

If true, closes the modal window after clicking the confirm button.

closeOnCancel 默认点击取消按钮关闭模态框。

Default: true

If true, closes the modal window after clicking the cancel button.

closeOnEscape 默认按ESC退出模态框。

Default: true

If true, closes the modal window after pressing the ESC key.

closeOnOutsideClick 默认点击模态框外部关闭模态框。

Default: true

If true, closes the modal window by clicking anywhere on the page.

modifier 默认样式为空。但你可以自定义模态框的背景等样式。

Default: ''

Modifier CSS classes for the modal that is added to the overlay, modal, background and wrapper (see CSS).

appendTo

Default: document.body

使用js初始化模态框

如果你使用js初始化模态框,请不要给模态框设置class=’modal’。

<div data-remodal-id="modal">
 <button data-remodal-action="close" class="remodal-close"></button>
 <h1>Remodal</h1>
 <p>
 Responsive, lightweight, fast, synchronized with CSS
 animations, fully customizable modal window plugin with
 declarative configuration and hash tracking.
 </p>
</div>
<script>
 var options = {...};
 $('[data-remodal-id=modal]').remodal(options);
</script>

方法

var inst = $('[data-remodal-id=modal]').remodal();
/**
 * 打开模态框
 */
inst.open();
/**
 * 关闭模态框
 */
inst.close();
/**
 * 返回当前模态框的状态
 * @returns {'closed'|'closing'|'opened'|'opening'}
 */
inst.getState();
/**
 * 销毁模态框
 */
inst.destroy();
//事件
$(document).on('opening', '.remodal', function () {
 console.log('Modal is opening');
});
$(document).on('opened', '.remodal', function () {
 console.log('Modal is opened');
});
$(document).on('closing', '.remodal', function (e) {
 // Reason: 'confirmation', 'cancellation'
 console.log('Modal is closing' + (e.reason ? ', reason: ' + e.reason : ''));
});
$(document).on('closed', '.remodal', function (e) {
 // Reason: 'confirmation', 'cancellation'
 console.log('Modal is closed' + (e.reason ? ', reason: ' + e.reason : ''));
});
$(document).on('confirmation', '.remodal', function () {
 console.log('Confirmation button is clicked');
});
$(document).on('cancellation', '.remodal', function () {
 console.log('Cancel button is clicked');
});

CSS样式

.remodal /*– the default class of modal dialogs.*/
.remodal-wrapper/*– the additional wrapper for the
.remodal, it is not the overlay and used for the alignment.*/
.remodal-overlay /* – the overlay of modal dialogs, it is under the wrapper.*/
.remodal-bg /*– the background of modal dialogs, it is under theoverlay and usually it is the wrapper of your content.
Youshouldadd it on your own.
The remodal prefix can be changed in the global settings. See the NAMESPACE option.*/

 

本文:jQuery:Remodal对话框 jQuery Modal Dialog Boxes