jQuery模态窗口插件vintage-popup

当前位置:主页 > jQuery库 > Lightbox和对话框 > jQuery模态窗口插件vintage-popup
jQuery模态窗口插件vintage-popup
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2019-07-25
    阅读:
简要教程

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






                

使用远程异步数据:





                  
                

example.json

{
  "replaces": [
    {
      "what": "[data-popup-id='exampleRemote'] .popup__content",
      "data": ""
    }
  ]
}                  
                
初始化插件
// 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