一款jQuery模态窗口插件vintage-popup

一款jQuery模态窗口插件vintage-popup

vintage-popup是一款jQuery模态窗口插件。该模态窗口插件支持放置任何HTML标签,通过简单的配置,既可以实现一个非常炫酷的打开模态窗口特效。

使用方法

NPM

1
npm i -S vintage-popup

yarn

1
yarn add vintage-popup

AMD方式使用

1
require(['vintage-popup'], function (Popup) {});

CommonJS方式使用

1
var Popup = require('vintage-popup');

ES6 (Webpack)

1
import Popup from 'vintage-popup';

在页面中直接引入。

1
2
3
<link href="vintage-popup.css" rel="stylesheet">
<link href="popup-default-theme.css" rel="stylesheet">
<script src="vintage-popup.js"></script>

HTML结构
一个模态窗口的基本HTML结构如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- Button which triggers modal -->
<button type="button" data-popup-target="example">
  Default popup
</button>

<!-- Popup -->
<div class="popup" data-popup-id="example" tabindex="-1" role="dialog">
    <div class="popup__container">
        <div class="popup__close"><span></span><span></span></div>
        <div class="popup__content">
            <div class="popup__title">Popup title</div>
            <div class="popup__body">Popup body</div>
        </div>
    </div>
</div>

使用远程异步数据:

1
2
3
4
5
6
7
8
9
10
11
12
<!-- Button that triggers modal -->
<button type="button" data-popup-target="exampleRemote" data-popup-remote="/path/example.json">
  Remote popup
</button>
 
<!-- Popup -->
<div class="popup" data-popup-id="exampleRemote" tabindex="-1" role="dialog">
    <div class="popup__container">
        <div class="popup__close"><span></span><span></span></div>
        <div class="popup__content"></div>
    </div>
</div>

example.json

1
2
3
4
5
6
7
8
{
  "replaces": [
    {
      "what": "[data-popup-id='exampleRemote'] .popup__content",
      "data": "<div class="popup__content"><div class="popup__title">Popup title</div><div class="popup__body">Popup body</div></div>"
    }
  ]
}

初始化插件

1
2
3
4
5
6
7
// initialize popup
$('button').popup();
 
// initialize with options
$('button').popup({
  closeOnEsc: false
});

在webpack中使用:

1
2
3
4
5
6
7
8
// import popup module
import Popup from 'vintage-popup';
 
// fix jQuery conflict (once)
Popup.expose($);
 
// use it!
$('button').popup();
温馨提示:此处内容需要评论本文后才能查看。
2

发表评论