Lock the Modal View

Class dс.test Extends %ZEN.Component.page
{

XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen">
  <button caption="Show modal group" onclick="zenPage.show();"/>
  <modalGroup id="mgStatic" groupTitle="Popup">
    <text id="mgText" label="Value:" />
    <button caption="OK" onclick="zenPage.mgBtnClick();"/>
  </modalGroup>
</page>
}

ClientMethod show() [ Language = javascript ]
{
  zenPage.__canClose = false;
  var mg = zen('mgStatic');
  
  mg.onCanEndModalHandler = this.onCanEndModalHandler();
  mg.hideGroup=this.hideGroup;

  mg.show();
}

ClientMethod mgBtnClick() [ Language = javascript ]
{
  zenPage.__canClose=true;
  zen('mgStatic').onCanEndModalHandler=null;

  zenAlert('User entered: ' +  zen('mgText').getValue());
  
  // hide the modal group
  zenPage.endModal();
}

ClientMethod onCanEndModalHandler() [ Language = javascript ]
{
  return true;
}

/// Hide the group.
ClientMethod hideGroup() [ Language = javascript ]
{
  if (!zenPage.__canClose) return;
  
  if (this.groupType == 'dialog') this._canClose = true;
  var div = this.getFloatingDiv();
  if (div) {
    div.style.opacity = 0;
  }
  if ((!zenIsHTML5) || (!window.TransitionEnd)) {
    if (!this._closing) {
      zenPage.endModal();
      this._closing = true;
    }
  }
}

}