Do not want to close aui dialogue on esc key press

[krishna mohan mathakala，修改在8 年前。]

Hi


I am using aui dialogue ,I want to prevent closing dialog when esc key is pressed.
Or is there any way to trig a method when esc key is pressed.
Aui version is 2.0.

[Kyle Joseph Stiemann，修改在8 年前。]

Hi Krishna,

One way to do this is to listen for the ESC press and prevent the dialog from hiding:

Y.one('body').on('key', function(event) {
modal.once('visibleChange', function(event) {
// If the dialog was already visible, then keep it visible.
if (event.prevVal === true) {
event.newVal = true;
}
});
}, 'esc');

The above code attaches a one time visibleChange listener to the modal that ensures it will remain visible after ESC is pressed. Otherwise, the dialog can be hidden normally.

Here's a runnable JSBin with the code.

- Kyle

[krishna mohan mathakala，修改在8 年前。]

Thanks Kyle Joseph Stiemann.

It worked for me .

var popUpWindow=Liferay.Util.Window.getWindow(
							{
								dialog: {
								centered: true,
								constrain2view: true,
								//cssClass: 'yourCSSclassName',
								modal: true,
								resizable: false,
								toolbars: false,
								width:500,
								height:380,
								}
							}


A.one('body').on('key', function(event) {
								popUpWindow.once('visibleChange', function(event) {
									if (event.prevVal === true) {
										event.newVal = true;
							}
							});
							}, 'esc');

[Mariappan K，修改在7 年前。]

Hi Krishna Mohan,
I was using this code. when I click the button the popupwindows is not opened . .

What I do

I attached my code. pls help me.
<aui:script use="liferay-util-window">
A.one('.generate-artform').on('click', function(event)
{
<!-- - alert("open"); -->
var popupWindow=Liferay.Util.openWindow({ dialog:
{
centered: true,
height: 2000,
modal: true,
width: 2000,
resizable: true
},
id: '<portlet:namespace/>dialog',
title: 'Art Information',
uri: '<%=generateArtFormURL %>'
}
);

A.one('body').on('key', function(event) {
popupWindow.once('visibleChange', function(event) {
// If the dialog was already visible, then keep it visible.
if (event.prevVal === true) {
event.newVal = false;
}
});
}, 'esc');
});
</aui:script>

[Kyle Joseph Stiemann，修改在7 年前。]

Hi Mariappan,
Could you post the shortest, simplest code needed to reproduce your issue? Please also include the version of Liferay and AlloyUI that you are using. Finally, please include any error messages that occur in the browser logs too.

- Kyle

[Mariappan K，修改在7 年前。]

Hi Stiemann,
Thanks for Reply. I was using Liferay ui icon button. When I click the the button then popup window was opened. I was used the above code to open a popup window . and if I click the ESC button I don't want to close the popup window. and I am using Liferay 6.2 version. I can't see any error message in browser. may you help me.
-Mariappan

[Kyle Joseph Stiemann，修改在7 年前。]

I see a couple of problems with your code:

• You are creating a new pop up window and [ESC] key handler every time you click the .generate-artform button:
  
  A.one('.generate-artform').on('click', function(event) {
  var popupWindow = Liferay.Util.openWindow({ /* ... */ });
  A.one('body').on('key', function(event) {
  // ...
  }, 'esc');
  });
  
  
• You are using html comments in your JavaScript:
  
  A.one('.generate-artform').on('click', function(event) {
  <!-- - alert("open"); -->
  // ...
  });
  

Instead what you should probably do is create the pop up once and attach the [ESC] key handler once:

var popupWindow = null;

A.one('.generate-artform').on('click', function(event) {
// alert("open");

// Only create the pop up window once.
if (!popupWindow) {
popupWindow = Liferay.Util.openWindow({
dialog: {
centered: true,
height: 2000,
modal: true,
width: 2000,
resizable: true,
visible: true
},
id: '<portlet:namespace/>dialog',
title: 'Art Information',
uri: '<%=generateArtFormURL %>'
});

// Only create the [ESC] key handler once.
A.one('body').on('key', function(event) {
popupWindow.once('visibleChange', function(event) {
// If the dialog was already visible, then keep it visible.
if (event.prevVal === true) {
event.newVal = false;
}
});
}, 'esc');
} else {
popupWindow.show();
}
});

This may or may not fix your issue, I would need to see the enclosing script markup and the .generate-artform button markup to be sure.

- Kyle