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:

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

    Popup App Methods

    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.

    app.popup.get(el)- get Popup instance by HTML element

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

    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

    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:

    Popup Methods & Properties

    So to create Popup we have to call:

    1. var popup = app.popup.create({ /* parameters */ })

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

    Control Popup With Links

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

    • To close popup we need to add “popup-close“ 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:

    1. <!-- In data-popup attribute we specify CSS selector of popup we need to open -->
    2. <p><a href="#" data-popup=".my-popup" class="popup-open">Open Popup</a></p>
    4. <!-- And somewhere in DOM -->
    5. <div class="popup my-popup">
    6.   <div class="view">
    7.     <div class="page">
    8.       <div class="navbar">
    9.         <div class="navbar-inner">
    10.           <div class="title">Popup</div>
    11.           <div class="right">
    12.             <!-- Link to close popup -->
    13.             <a class="link popup-close">Close</a>
    14.           </div>
    15.       </div>
    16.       <div class="page-content">
    17.         ...
    18.       </div>
    19.     </div>
    20.   </div>
    21.   ...
    22. </div>

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

    App and Popup Instance Events

    Popup instance emits events on both self instance and app instance. App instance events has same names prefixed with popup.

    CSS Variables

    Below is the list of related CSS variables (CSS custom properties).

    Note that commented variables are not specified by default and their values is what they fallback to in this case.

    Examples

    2.   ...
    3.     <div class="page-content">
    4.       <div class="block">
    5.         <!-- Open About Popup -->
    6.         <p><a class="link popup-open" href="#" data-popup=".popup-about">Open About Popup</a></p>
    7.         <!-- Open Services Popup -->
    8.         <p><a class="link popup-open" href="#" data-popup=".popup-services">Open Services Popup</a></p>
    9.         <!-- Create Dynamic Popup -->
    10.         <p><a class="link dynamic-popup" href="#">Create dynamic popup</a></p>
    12.         <!-- Popup with swipe-to-close -->
    13.         <p><a class="link popup-open" href="#" data-popup=".popup-swipe-to-close">Popup with swipe to close</a></p>
    14.         <!-- Popup with swipe-to-close handler -->
    15.         <p><a class="link popup-open" href="#" data-popup=".popup-swipe-to-close-handler">Popup with swipe to close handler</a></p>
    16.       </div>
    17.     </div>
    18.   ...
    19.   <div class="popup popup-about">
    20.     <div class="block">
    21.       <p>About</p>
    22.       <!-- Close Popup -->
    23.       <p><a class="link popup-close" href="#">Close popup</a></p>
    24.       <p>Lorem ipsum dolor sit amet...</p>
    25.     </div>
    26.   </div>
    27.   <div class="popup popup-services">
    28.     <div class="block">
    29.       <p>Services</p>
    30.       <!-- Close Popup -->
    31.       <p><a class="link popup-close" href="#">Close popup</a></p>
    32.       <p>Lorem ipsum dolor sit amet...</p>
    33.     </div>
    34.   </div>
    35.   <div class="popup popup-swipe-to-close">
    36.     <div class="block text-align-center">
    37.       <p>Swipe me up or down to close</p>
    38.     </div>
    39.   </div>
    40.   <div class="popup popup-swipe-to-close-handler">
    41.     <div class="block">
    42.       <p class="my-swipe-to-close-handler"><b>Swipe works only on this paragraph</b></p>
    43.       <p>Lorem ipsum dolor sit amet...</p>
    44.     </div>
    45.   </div>
    1. var app = new Framework7();
    3. var $$ = Dom7;
    6. $$('.popup-about').on('popup:open', function (e, popup) {
    7.   console.log('About popup open');
    8. });
    9. $$('.popup-about').on('popup:opened', function (e, popup) {
    10.   console.log('About popup opened');
    11. });
    13. // Create dynamic Popup
    14. var dynamicPopup = app.popup.create({
    15.   content: '<div class="popup">'+
    16.               '<div class="block">'+
    17.                 '<p>Popup created dynamically.</p>'+
    18.                 '<p><a href="#" class="link popup-close">Close me</a></p>'+
    19.               '</div>'+
    20.             '</div>',
    21.   // Events
    22.   on: {
    23.     open: function (popup) {
    24.       console.log('Popup open');
    25.     },
    26.     opened: function (popup) {
    27.       console.log('Popup opened');
    28.     },
    29.   }
    30. });
    31. // Events also can be assigned on instance later
    32. dynamicPopup.on('close', function (popup) {
    33.   console.log('Popup close');
    34. });
    35. dynamicPopup.on('closed', function (popup) {
    36.   console.log('Popup closed');
    37. });
    39. // Open dynamic popup
    40. $$('.dynamic-popup').on('click', function () {
    41.   dynamicPopup.open();
    42. });
    44. // Create Popup with swipe to close
    45. var swipeToClosePopup = app.popup.create({
    46.   el: '.popup-swipe-to-close',
    47.   swipeToClose: true,
    48. });
    50. // Create Popup with swipe to close handler
    51. var swipeToClosePopup = app.popup.create({
    52.   el: '.popup-swipe-to-close-handler',
    53.   swipeToClose: true,