# How to Fire a Close Event on Dialog X Button Click

By default, the X button on dialog pages cancels and closes the dialog when clicked. Today, I came across a situation where I needed to trigger a dialog close dynamic action on the parent page whenever the dialog is closed. However, I can't rely on users always clicking my dialog close button. I could remove the X button, but I want to keep it consistent with all other dialogs.

## **Overriding the Default X button Behavior**

1. Define a custom JavaScript function to trigger a custom event when the dialog closes. Add this function to your page's JavaScript (either on the parent page, page 0, or in your global JavaScript file):
    

```javascript
function customEvent(event, data) {
    apex.event.trigger(document, event, data);
}
```

2. In the modal dialog page attributes, navigate to the "Dialog" section and set the "Attributes" property to:
    

```javascript
close: function() { 
    customEvent('customDialogClose', {modalPageId: 'MODAL_CLOSE_FIXED'});
}
```

This overrides the default close behavior and triggers a custom event named "customDialogClose" when the dialog is closed, including when the "X" button is clicked

## **Creating a Dynamic Action on the Parent Page**

3. On the parent page, create a new dynamic action with the following settings:
    

* Event: Custom
    
* Custom Event: customDialogClose
    
* Selection Type: JavaScript Expression
    
* JavaScript Expression: document
    

4. Add the desired actions to this dynamic action, such as refreshing regions, setting item values, or executing JavaScript code
    

## **Additional Considerations**

* This approach will handle both the "X" button click and other cancellation methods, such as using a dynamic action with a "Cancel Dialog" action.
    
* The custom event will be triggered on the parent page, allowing you to perform actions after the dialog is closed.
    
* You can use the data attribute (modalPageId in the example) to differentiate between multiple modal dialogs if needed.