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

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

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.

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:

This Post Has 8 Comments

  1. Steve Evans September 23, 2020

    Thanks!

  2. Chirag Bhavsar October 14, 2020

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

    1. Vinish Kapoor October 15, 2020

      This is the tested method in Oracle Apex 18.1 onwards. What is the version of your Oracle Apex?

  3. João Coimbra October 21, 2020

    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

    1. Vinish Kapoor October 21, 2020

      Yes, try to use the above CSS in parent page, it should be ok.

  4. vane November 10, 2020

    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.

  5. waqas November 25, 2020 
    closeOnEscape:false

    not working in latest version any other solution please

  6. Oscar Mora November 26, 2021

    Hi I tried the above steps but it did not worked, it just worked disable ESC Key to Prevent Close Dialog.

    Not working in Application Express 21.1 any other solution please "Hide Dialog Window Title Bar Close (X) Button"

Comments are closed.