Open a popup with a custom trigger

As an example, we will open a popup when clicking on a link.

<!-- test/page-with-link.html -->
<div>
  <span> Click this <a href="#" data-bind="click: link.trigger">link</a>
</div>
function defineWidgetWithLink(page) {
  var link = Trigger.defineTrigger();

  page.definePageSegment({
    selector: "details",
    view: "test/page-with-link",
    viewModel: { link: link }
  });

  return {
    link: link // we need this for later
  };
}

Step 2: create a html template for your popup

See higher.

Step 3: define your popup in a function

function defineHelloWorldPopup(trigger) {
  // Define a viewModel for your popup
  var viewModel = {
    greeting: "Hello World!"
  }

  // Define the popup
  Popup.definePopup({
    trigger: trigger,
    view: "test/helloWorld",
    viewModel: viewModel,
    title: "Hello"
  });
}

Step 3: call your functions

// anchor: custom-page-after: start
var widget = defineWidgetWithLink(page);
defineHelloWorldPopup(widget.link);
// anchor: custom-page-after: end