Docs

Everything You Need to Know

Widgets

Popup

A popup is a custom alert or dialog box. These are styled to resemble the native popups of each platform. They are a number of options for customizing how they display and act. The options for a popup are:

  • id - an id for the popup
  • title - displayed in the popup's title bar
  • message - displayed in the body of the popup
  • cancelButton - a name for the cancel button, the default is "Cancel"
  • continueButton - a name for the continue button, the defualt is "Continue"
  • width - a width for the popup, the default vaires by platform
  • callback - a callback to execute when the user taps the Continue button
  • empty - this creates an empty popup, which you can poplate with what you want.

Here's an example of a popup:

$.Popup({
  id: "warning",
  title: 'Attention Viewers!', 
  message: 'The performance of "Merchant of Venice", Act 4 scene 1, will begin shortly. Thank you for your patience.', 
  cancelButton: 'Skip', 
  continueButton: 'Stay', 
  callback: function() {
    var popupMessageTarget = document.querySelector('#popupMessageTarget');
    popupMessageTarget.textContent = 'Thanks for staying with us a bit longer.';
    popupMessageTarget.classList.remove("animatePopupMessage");
    popupMessageTarget.classList.add("animatePopupMessage");
    setTimeout(function() {
      $('#popupMessageTarget').empty()
    }, 2000);
  }
});

$("#showPopup").on("tap", function() {
  $('#warning').ShowPopup();
});

After initializing the popup, we can use its id to show it with the ShowPopup() method. You can see this being used in the final event registered above.

Simple Layout

Check out the file "popup.html" in the examples folder. You can also see an example of an empty popup used for a busy control in file "activty-indicator-model.html". Read the following instructions for getting the examples.

Popup Example

See the Pen Popup by Robert Biggs (@rbiggs) on CodePen.

Popup with Android Theme

See the Pen Popup for Android by Robert Biggs (@rbiggs) on CodePen.