Hide dialog overlay before the dialog is animated out of view instead of after

[Lee]

Hi,

By default, when a dialog component is dismissed/closed, the transparent background overlay remains visible until the dialog itself is no longer in view which to me looks a bit odd. I'd much prefer to change this so that the background overlay is hidden/faded out at the same time (or before) the dialog content is but cannot find a way to achieve this.

Is this possible and if so, can you point in the direction of how to achieve this?

[Revanth Krishnan]

Hi Lee, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “How to hide the dialog overlay before the dialog animation out of view instead of after animation”. 

 

This can be achieved by adding the class ‘e-fade’ to the overlay element using the ‘beforeClose’ event in the dialog. We have prepared a sample for your reference, 

 

Code Snippet: 

 

. . . 

dialogBeforeClose() { 

  document.querySelector(".e-dlg-overlay").classList.add("e-fade"); 

} 

. . . 

render() { 

      . . . 

      <DialogComponent 

        id="modalDialog" 

        isModal={true} 

        buttons={this.buttons} 

        header="Software Update" 

        width="335px" 

        content="Your current software version is up to date." 

        ref={dialog => (this.dialogInstance = dialog)} 

        visible={this.state.hideDialog} 

        open={this.dialogOpen.bind(this)} 

        close={this.dialogClose.bind(this)} 

        beforeClose={this.dialogBeforeClose.bind(this)} 

        animationSettings={this.animationSettings} 

      /> 

      . . . 

} 

 

Sample: https://stackblitz.com/edit/react-jbi3a8-gxwaxi?file=index.js 

 

Please check the above code snippet and the sample and let us know if it satisfies your requirement. 

 

Regards, 

Revanth 

[Lee]

Hi,

That's exactly what I'm looking for, thanks!

[Revanth Krishnan]

Hi Lee, 

 

Thanks for the update. 

 

We are glad that the provided solution satisfied your requirement, please let us know if you need any further assistance. 

 

Regards, 

Revanth 

[Lee]

Hi,

Playing around with this a bit more, the suggested fix doesn't appear to work when there are multiple dialogs on a page.

I'm showing a list of items with an edit and delete button for each, the edit button will open a dialog with the item's content for editing and the delete button will show a confirmation dialog before the item is deleted.

With the suggested change applied to both dialog components, only one will actually "work" in that the background fades out as the dialog closes (this seems to be whichever is the last one defined in the code). The other has the original behaviour I'm trying to avoid.

Is having multiple dialog components on a page a supported scenario and if so, is there a way to get this working?

[Revanth Krishnan]

Hi Lee, 

 

 

Good day to you. 

 

 

We have validated your query “The suggested fix doesn’t appear to work when there are multiple dialogs on a page, Is having multiple dialog components on a page a supported scenario and if so, is there a way to get this working?” 

 

Yes, multiple dialog components can be used in the page and your requirement when multiple dialogs are on a page can be achieved by adding the class ‘e-fade’ to the respective dialog’s overlay element. We have prepared a sample for your reference, 

 

Code Snippet: 

 

<DialogComponent  

    ref={dialog => (this.dialogInstance = dialog)} 

    beforeClose={this.dialogBeforeClose.bind(this)} 

/> 

 

<DialogComponent 

    ref={dialog => (this.dialogInstance2 = dialog)} 

    beforeClose={this.dialogBeforeClose2.bind(this)} 

/> 

 

dialogBeforeClose() { 

  this.dialogInstance.element.parentElement 

    .querySelector(".e-dlg-overlay") 

    .classList.add("e-fade"); 

} 

 

dialogBeforeClose2() { 

  this.dialogInstance2.element.parentElement 

    .querySelector(".e-dlg-overlay") 

    .classList.add("e-fade"); 

} 

 

Sample: https://stackblitz.com/edit/react-jbi3a8-4smanp?file=index.js 

 

Please check the above code snippet and the sample and let us know if it satisfies your requirement. 

 

Regards, 

Revanth 

[Lee]

Thanks a lot. That achieves the desired effect.

[Revanth Krishnan]

Hi Lee, 

 

Thanks for the update. 

 

We are glad that the provided solution satisfies your requirement, please let us know if you need further assistance. 

 

Regards, 

Revanth