Popup弹出窗口 - SUI 移动开发UI库

返回介绍

Popup弹出窗口

发布于 2017-06-12 字数 7013 浏览 1263 评论 0

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

Popup 布局

Popup 布局相当简单. 你所需要做的就是将放到 body 里正确的位置上:

<div class="modal modal-no-buttons">
  ...
  <div class="popup">
    Any HTML content goes here
  </div>
</div>

打开和关闭 Popup

通过HTML

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

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

根据上面的注意点:

<header class="bar bar-nav">
    <h1 class="title">Popup(HTML)</h1>
</header>
...
<div class="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>

使用 JavaScript

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

$.popup(popup) – 打开 Popup

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

$.closeModal(popup) – 关闭 Popup

  • popup - HTML元素 或者 字符串 (需要打开的popup的 CSS 选择器). 可选. 如果没有设置这个值,任何打开着的Popup/Modal 都将被关闭
<header class="bar bar-nav">
    <h1 class="title">Popup(JavaScript)</h1>
</header>
...
<div class="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>

$(document).on('click','.open-about', function () {
  $.popup('.popup-about');
});
 
$(document).on('click','.open-services', function () {
  $.popup('.popup-services');
});

Popup 事件

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

事件 目标 描述
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 完成结束动画后,事件将被触发。
<header class="bar bar-nav">
    <h1 class="title">Popup事件</h1>
</header>
...
<div class="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>
$(document).on('click','.popup-about', function () {
  console.log('About Popup opened')
});
$(document).on('click','.popup-about', function () {
  console.log('About Popup is closing')
});
$(document).on('click','.popup-services', function () {
  console.log('Services Popup is opening')
});
$(document).on('click','.popup-services', function () {
  console.log('Services Popup is closed')
});

动态的 Popup

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

$.popup(popupHTML, removeOnClose) – 打开 Popup

  • popupHTML – string. popup的HTML字符串
  • removeOnClose – boolean. 可选, 默认 – true. 如果是 true, 那么 Popup 在关闭时将从DOM中移除
<header class="bar bar-nav">
    <h1 class="title">动态的 Popup</h1>
</header>
...
<div class="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>
$(document).on('click','.create-popup', 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>'
  $.popup(popupHTML);
});

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

目前还没有任何评论,快来抢沙发吧!