Press "Enter" to skip to content

Oracle Apex: Disable Escape Key (ESC) to Prevent Close Dialog

In Oracle Apex, you have created a modal dialog page and you want to disable the escape key to prevent close dialog window. To achieve this, follow these simple steps:

Disable ESC Key to Prevent Close Dialog

Open your dialog page in Oracle Apex. Then right side in the property palette, scroll down to the Dialog section and add the following code to the Attribute property:

closeOnEscape:false

Below is the screenshot for your reference:

Prevent close modal dialog on ESC key.

Now save the changes and run its parent page to test and you will see, on Escape key press the dialog will not close.

But what if the user will close the dialog from the title bar (X) close button? Maybe you want the user to close the dialog via close/cancel button only, because you may have written some code on it. To disable the title bar close (X) button, follow these steps:

Hide Dialog Window Title Bar Close (X) Button

Open the parent page from where you are opening the dialog page and add the following CSS code in the Inline CSS property section:

.no-close .ui-dialog-titlebar-close {
   display: none;
}

Save the changes to the parent page.

Now open your dialog page and in the Dialog property section add the no-close class in the CSS Classes property. You will find this property below the Attribute property, you can see it in the above image.

Save the changes and to test it at runtime, refresh the parent page first, and then open the dialog, you will not see the title bar close (X) button, as shown in the below image:

Hiding dialog window title bar close button.

Now the user has to press the Cancel or Apply Changes button to close the dialog. The user will not be able to close using the Escape key or via the title bar close button.

Related Tutorials:

Have you found the answer to your question? If not, you can discuss it with me in the comments section below or join my Q&A community OrclQA.com for developers and ask your question. It is FREE.

Vinish Kapoor

Follow

Hi, I am a full stack developer and writing about development. I document everything I learn and help thousands of people. foxinfotech.in is created, written, and maintained by me; it is built on WordPress, and hosted by Bluehost. Connect with me on Facebook, Twitter, GitHub, and get notifications for new posts.

guest
7 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Steve Evans
Steve Evans
5 months ago

Thanks!

Chirag Bhavsar
Chirag Bhavsar
4 months ago

Hi I tried the above steps but it did not worked.

João Coimbra
João Coimbra
4 months ago

The modal parent is what controls the ui-dialog-titlebar-close is ready to react of it, thats why You should config in the parent page? I used // Hide button X
var button = parent.$(‘.ui-dialog-titlebar-close’); //get the button
button.hide(‘fast’); //hide the button
But it still leaves a glimpsy of it before it is hidden

vane
vane
3 months ago

Thank you for this post. I have been searching the answer for this for 5 hours. Tried MANY different methods. Finally, you have the ABSOLUTE solution. It is working perfectly. Thank you very much.

waqas
waqas
3 months ago
closeOnEscape:false

not working in latest version any other solution please