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 is pretty simple:

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 “popup-tablet-fullscreen“ class to the required popup:

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

Let’s look at related App methods to work with Popup:

app.popup.create(parameters)- create Popup instance

• parameters - object. Object with popup parameters

Method returns created Popup’s instance

app.popup.destroy(el)- destroy Popup instance

• el - HTMLElement or string (with CSS Selector) or object. Popup element or Popup instance to destroy.

• el - HTMLElement or string (with CSS Selector). Popup element.

Method returns Popup’s instance

app.popup.open(el, animate)- opens Popup

• el - HTMLElement or string (with CSS Selector). Popup element to open.
• animate - boolean. Open Popup with animation.

Method returns Popup’s instance

app.popup.close(el, animate)- closes Popup

• el - HTMLElement or string (with CSS Selector). Popup element to close.
• animate - boolean. Close Popup with animation.

Method returns Popup’s instance

Popup Parameters

Now let’s look at list of available parameters we need to create Popup:

Note that all following parameters can be used in global app parameters under popup property to set defaults for all popups. For example:

var app = new Framework7({
  popup: {
    closeByBackdropClick: false,
  }
});

After that we have its initialized instance (like popup variable in example above) with useful methods and properties:

Control Popup With Links

It is possible to open and close required popup (if you have them in DOM) using special classes and data attributes on links:

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

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

According to above note:

<!-- In data-popup attribute we specify CSS selector of popup we need to open -->
<p><a href="#" data-popup=".my-popup" class="popup-open">Open Popup</a></p>
<!-- And somewhere in DOM -->
<div class="popup my-popup">
  <div class="view">
    <div class="page">
      <div class="navbar">
        <div class="navbar-inner">
          <div class="title">Popup</div>
            <!-- Link to close popup -->
            <a class="link popup-close">Close</a>
          </div>
        </div>
      </div>
      <div class="page-content">
        ...
      </div>
    </div>
  </div>
  ...
</div>

Popup will fire the following DOM events on popup element and events on app and popup instance:

App and Popup Instance Events

Examples

var app = new Framework7();
var $$ = Dom7;
// DOM events for About popup
$$('.popup-about').on('popup:open', function (e, popup) {
  console.log('About popup open');
});
  console.log('About popup opened');
});
// Create dynamic Popup
var dynamicPopup = app.popup.create({
              '<div class="block">'+
                '<p>Popup created dynamically.</p>'+
                '<p><a href="#" class="link popup-close">Close me</a></p>'+
              '</div>'+
            '</div>',
  // Events
  on: {
    open: function (popup) {
      console.log('Popup open');
    },
    opened: function (popup) {
      console.log('Popup opened');
    },
  }
});
// Events also can be assigned on instance later
dynamicPopup.on('close', function (popup) {
  console.log('Popup close');
});
dynamicPopup.on('closed', function (popup) {
  console.log('Popup closed');
});
// Open dynamic popup
$$('.dynamic-popup').on('click', function () {
  dynamicPopup.open();