Written by

Question Nezla · Oct 14, 2021

Lock the Modal View

#Ensemble

Hi Guys,

I'm using a Modal Group but whenever I click outside it the Modal gets minimised, so How can I change the view so that whenever pops up the view get locked until I'm finished with my modal then click exit to endModal ?

thanks

Product version: Caché 2014.1

Discussion (3)1

Add reply

Comments

Robert Cemper · Apr 10, 2022

Do you still expect some echo?
Or is the question meanwhile just out of date?

0 0

Nezla Apr 10, 2022 to Robert Cemper

I didn't get any replies, so I appreciate some help.

Thanks

0 0

Vitaliy Serdtsev · Apr 11, 2022

Any event that occurs outside of the modal group (such as a mouse click) automatically hides the modal group^proof.

Use Popup windows with modal=yes or Dialogs.

PS: if you really need to use "Model Groups", then you need to do two things for this:

override the method onCanEndModalHandler
override the method hideGroup(). This is necessary to prohibit the close button in the upper right corner

Here is a small variant:

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;
    }
  }
}

}

0 0