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

  • Post author:
  • Post category:OrclApex
  • Reading time:3 mins read
Hiding dialog window title bar close button.

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:

Vinish Kapoor

An Oracle Apex Consultant, Oracle ACE, and founder of foxinfotech.in and orclqa.com a question and answer forum for developers.

This Post Has 8 Comments

  1. Steve Evans

    Thanks!

  2. Chirag Bhavsar

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

    1. Vinish Kapoor

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

  3. João Coimbra

    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

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

  4. vane

    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
    closeOnEscape:false
    

    not working in latest version any other solution please

  6. Oscar Mora

    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.