vintage-popup是一款jQuery模态窗口插件。该模态窗口插件支持放置任何HTML标签,通过简单的配置,既可以实现一个非常炫酷的打开模态窗口特效。
使用方法
NPM
npm i -S vintage-popup
yarn
yarn add vintage-popup
AMD方式使用
require(['vintage-popup'], function (Popup) {});
CommonJS方式使用
var Popup = require('vintage-popup');
ES6 (Webpack)
import Popup from 'vintage-popup';
在页面中直接引入。
HTML结构
一个模态窗口的基本HTML结构如下:
Popup titlePopup body
使用远程异步数据:
example.json
{ "replaces": [ { "what": "[data-popup-id='exampleRemote'] .popup__content", "data": "" } ] }Popup titlePopup body
初始化插件
// initialize popup $('button').popup(); // initialize with options $('button').popup({ closeOnEsc: false });
在webpack中使用:
// import popup module import Popup from 'vintage-popup'; // fix jQuery conflict (once) Popup.expose($); // use it! $('button').popup();
该jQuery模态窗口插件的配置参数请参考:https://github.com/Inspired-by-Boredom/vintage-popup#options
该jQuery模态窗口插件的github网址为:https://github.com/Inspired-by-Boredom/vintage-popup
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!