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 moduleimport 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