Any event that occurs outside of the modal group (such as a mouse click) automatically hides the modal groupproof.
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;
}
}
}
}- Log in to post comments