meet-popup

A mobile modal popup component ! Support IOS overlay scroll prevent background scroll

1.0.0
latest
Source
npm

Version published: 6 years ago

Maintainers: 1

Created: 6 years ago

Source

Docs and Demos

showcase

feature

1、解决ios滚动穿透问题

2、支持open，close前后的生命周期

3、支持动画

install

npm install popup --save-dev

How to use?

HTML

  <body>

    <div class="container">
       <!-- 你的页面内容 -->
    </div>

    <div class="meet-popup">
      <div class="meet-popup-mask"></div>
      <div class="meet-popup-container">
        <div class="popup-header">
          <span class="p-left">顶部header数据</span>
          <span class="p-right">
            <div class="popup-close-icon"></div>
          </span>
        </div>
        <div class="popup-content">
           <!-- 你的弹框内容 -->
        </div>
      </div>
    </div>

  </body>

javascript

####基础使用

const Popup = require('popup');

var popupMsg = new Popup(document.querySelector('.meet-popup'),{
  container: '.container',  // 必须，页面容器的选择器
});

popupMsg.open();

Is it easy to use ? 😂

高级使用

const Popup = require('popup');

var popupMsg = new Popup(document.querySelector('.meet-popup'),{
  container: '.container',  // 必须，页面容器的选择器
  header: 'center',  // 必须 弹框header的布局 ，支持：left， center
  animate: true, // 非必须， 默认无动画
  beforeOpen: function(next){ // 非必须，open前的钩子函数
    next();
  },
  afterOpen: function(){  // 非必须 open后的钩子函数
  },
  beforeClose: function(next){  // 非必须 close前的钩子函数
    next()
  },
  afterClose: function(){  // 非必须 close后的钩子函数
  }
});

popupMsg.open();

property	description
open	show popup
close	close popup

demo

FAQs

What is meet-popup?

Is meet-popup well maintained?

Package last updated on 12 Jul 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install