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 -->
  <span> Click this <a href="#" data-bind="click: link.trigger">link</a>
function defineWidgetWithLink(page) {
  var link = Trigger.defineTrigger();

    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
    trigger: trigger,
    view: "test/helloWorld",
    viewModel: viewModel,
    title: "Hello"

Step 3: call your functions

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