Popup

优质

小牛编辑

130浏览

2023-12-01

Popup 是一种可以包含任何Html内容的弹出窗口，从App的主内容区域上弹出。 Popup 和其他所有的遮罩图层一样，是所谓的“临时视图”的一部分。

Popup 布局

Popup 布局相当简单. 你所需要做的就是将 <div class="popup"> 任何需要展示的内容 </div> 放到 body 里正确的位置上:

<body>
  ...
  <div class="popup">
    Any HTML content goes here
  </div>
</body>

Popup 尺寸

默认的 Popup 在手机和平板(iPad)上尺寸有一些不同。在手机上是全屏的，在平板上宽高都是630px。如果你想使它在平板上也是全屏的，你应该添加额外的"tablet-fullscreen"类到需要的popup中：

<body>
  ...
  <!-- This popup has fullscreen size on tablets -->
  <div class="popup tablet-fullscreen">
    Any HTML content goes here
  </div>
</body>

打开和关闭 Popup

通过HTML

可以通过在链接上使用特定的类和data属性打开和关闭所需的popups：

为了打开popup，我们需要添加 "open-popup" 类到任意 HTML 元素上 (最好是链接)
为了关闭popup，我们需要添加 "close-popup" 类到任意 HTML 元素上 (最好是链接)
如果你的App里有超过一个popups, 你需要指定适当popup，则需添加额外的属性 data-popup=".my-popup" 到这个 HTML 元素上

根据上面的注意点：

<body>
  ...
    <div class="page-content">
      <div class="content-block">
        <!-- In data-popup attribute we specify CSS selector of popup we need to open -->
        <p><a href="#" data-popup=".popup-about" class="open-popup">Open About Popup </a></p>
        <p><a href="#" data-popup=".popup-services" class="open-popup">Open Services Popup </a></p>
      </div>
    </div>
  ...
  <!-- About Popup -->
  <div class="popup popup-about">
    <div class="content-block">
      <p>About</p>
      <p><a href="#" class="close-popup">Close popup</a></p>
      <p>Lorem ipsum dolor ...</p>
    </div>
  </div>
  <!-- Services Popup -->
  <div class="popup popup-services">
    <div class="content-block">
      <p>Services</p>
      <p><a href="#" class="close-popup">Close popup</a></p>
      <p>Lorem ipsum dolor ...</p>
    </div>
  </div>
</body>

使用 JavaScript

我们也可以用使用JavaScript来打开和关闭Popups ，因此我们需要看一下相关的App方法：

myApp.popup(popup) - 打开 Popup

popup - HTML元素或者字符串 (需要打开的popup的 CSS 选择器) . 必需

myApp.closeModal(popup) - 关闭 Popup

popup - HTML元素或者字符串 (需要打开的popup的 CSS 选择器). 可选. 如果没有设置这个值，任何打开着的Popup/Modal 都将被关闭

<body>
  ...
    <div class="page-content">
      <div class="content-block">
        <p><a href="#" class="open-about">Open About Popup </a></p>
        <p><a href="#" class="open-services">Open Services Popup </a></p>
      </div>
    </div>
  ...
  <!-- About Popup -->
  <div class="popup popup-about">
    <div class="content-block">
      <p>About</p>
      <p><a href="#" class="close-popup">Close popup</a></p>
      <p>Lorem ipsum dolor ...</p>
    </div>
  </div>
  <!-- Services Popup -->
  <div class="popup popup-services">
    <div class="content-block">
      <p>Services</p>
      <p><a href="#" class="close-popup">Close popup</a></p>
      <p>Lorem ipsum dolor ...</p>
    </div>
  </div>
</body>

var myApp = new Framework7();
 
var $$ = Dom7;
 
$$('.open-about').on('click', function () {
  myApp.popup('.popup-about');
});
 
$$('.open-services').on('click', function () {
  myApp.popup('.popup-services');
});

Popup 事件

Popup 和 Modals有一样的事件, 如果你需要在打开/关闭popup时使用JavaScript做一些事情的时候，这些事件会很有用。

Event（事件）	Target（目标）	Description（描述）
open	Popup Element<div class="popup">	当 Popup 开始打开动画时，事件将被触发。
opened	Popup Element<div class="popup">	当 Popup 完成打开动画时，事件将被触发。
close	Popup Element<div class="popup">	当 Popup 开始结束动画时，事件将被触发。
closed	Popup Element<div class="popup">	当 Popup 完成结束动画后，事件将被触发。

<body>
  ...
    <div class="page-content">
      <div class="content-block">
        <!-- In data-popup attribute we specify CSS selector of popup we need to open -->
        <p><a href="#" data-popup=".popup-about" class="open-popup">Open About Popup </a></p>
        <p><a href="#" data-popup=".popup-services" class="open-popup">Open Services Popup </a></p>
      </div>
    </div>
  ...
  <!-- About Popup -->
  <div class="popup popup-about">
    <div class="content-block">
      <p>About</p>
      <p><a href="#" class="close-popup">Close popup</a></p>
      <p>Lorem ipsum dolor ...</p>
    </div>
  </div>
  <!-- Services Popup -->
  <div class="popup popup-services">
    <div class="content-block">
      <p>Services</p>
      <p><a href="#" class="close-popup">Close popup</a></p>
      <p>Lorem ipsum dolor ...</p>
    </div>
  </div>
</body>

var myApp = new Framework7();
 
var $$ = Dom7;
 
$$('.popup-about').on('opened', function () {
  console.log('About Popup opened')
});
$$('.popup-about').on('close', function () {
  console.log('About Popup is closing')
});
$$('.popup-services').on('open', function () {
  console.log('Services Popup is opening')
});
$$('.popup-services').on('closed', function () {
  console.log('Services Popup is closed')
});

动态的 Popup

Framework7允许你调用相关的App方法时传递HTML内容来动态地创建Popup:

myApp.popup(popupHTML, removeOnClose) - 打开 Popup

popupHTML - string. popup的HTML字符串
removeOnClose - boolean. 可选, 默认 - true. 如果是 true，那么 Popup 在关闭时将从DOM中移除

<body>
  ...
    <div class="page-content">
      <div class="content-block">
        <!-- In data-popup attribute we specify CSS selector of popup we need to open -->
        <p><a href="#" class="create-popup">Create Popup</a></p>
      </div>
    </div>
  ...
</body>

var myApp = new Framework7();
 
var $$ = Dom7;
 
$$('.create-popup').on('click', function () {
  var popupHTML = '<div class="popup">'+
          '<div class="content-block">'+
            '<p>Popup created dynamically.</p>'+
            '<p><a href="#" class="close-popup">Close me</a></p>'+
          '</div>'+
        '</div>'
  myApp.popup(popupHTML);
});