jQuery模态窗口插件vintage-popup

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结构如下：

  Default popup




    

        

        

            
Popup title
            
Popup body
        
    

                

使用远程异步数据：

  Remote popup




    

        

        

    
                  
                

example.json

{
  "replaces": [
    {
      "what": "[data-popup-id='exampleRemote'] .popup__content",
      "data": "
Popup title
Popup 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