Framework7 v1
DocsFramework7 VueFramework7 ReactForum

Popup

Popup is a popup window with any HTML content that pops up over App's main content. Popup as all other overlays is part of so called "Temporary Views".

Popup Layout

Popup layout is pretty simple. All you need to do is to put <div class="popup"> Any popup content here </div> right in the body:

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

Popup Size

By default Popup has a bit different size on phones and tablets (iPad). On phones it is fullscreen while on tablets it is 630px width and height. If you want to make it fullscreen size on tablets, you should add additional "tablet-fullscreen" class to the required popup:

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

Open and close Popup

From HTML

It is possible to open and close required popups using special classes and data attributes on links:

  • To open popup we need to add "open-popup" class to any HTML element (prefered to link)

  • To close popup we need to add "close-popup" class to any HTML element (prefered to link)

  • If you have more than one popups in app, you need to specify appropriate popup via additional data-popup=".my-popup" attribute on this HTML element

According to above note:

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

Using JavaScript

We can also open and close Popups with JavaScript, for this we need to look at related App methods:

myApp.popup(popup, removeOnClose, animated) - open Popup

  • popup - HTMLElement or string (with CSS Selector) of Popup to open. Requred
  • removeOnClose - boolean - Defines whether popup should be removed from DOM on close or not. Optional. By default is false
  • animated - boolean - Should it be opened with animation or not. Optional. By default is true
  • This method returns Popup's HTMLElement

myApp.closeModal(popup, animated) - close Popup

  • popup - HTMLElement or string (with CSS Selector). Optional. If not specified, any opened Popup/Modal will be closed
  • animated - boolean - Should it be opened with animation or not. Optional. By default is true
<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 Events

Popup has the same events as Modals, they could be useful when you need to do something in JavaScript when Popup opened/closed

Event Target Description
popup:open Popup Element<div class="popup"> Event will be triggered when Popup starts its opening animation
popup:opened Popup Element<div class="popup"> Event will be triggered after Popup completes its opening animation
popup:close Popup Element<div class="popup"> Event will be triggered when Popup starts its closing animation
popup:closed Popup Element<div class="popup"> Event will be triggered after Popup completes its closing animation 
<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('popup:opened', function () {
  console.log('About Popup opened')
});
$$('.popup-about').on('popup:close', function () {
  console.log('About Popup is closing')
});
$$('.popup-services').on('popup:open', function () {
  console.log('Services Popup is opening')
});
$$('.popup-services').on('popup:closed', function () {
  console.log('Services Popup is closed')
});

Dynamic Popup

Framework7 allows you to create Popup dynamically by passing its HTML to related App methods:

myApp.popup(popupHTML, removeOnClose) - open Popup

  • popupHTML - string. HTML string of popup content
  • removeOnClose - boolean. Optional, by default - true. If true then Popup will be removed from DOM when closed
<body>
  ...
    <div class="page-content">
      <div class="content-block">
        <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);
});