Dialog - How to isolate dialog overlay styling?

[Lee Stevens]

I am trying to create a popup which opens on clicking a link and displays in a similar way to the Quick Info from the SfSchedule control.

I can achieve the look and feel of this by making a modal SfDialog control which closes when OnOverlayClick is raised and styling e-dlg-overlay to have a transparent background-color as recommended in the documentation like so: 

.e-dlg-overlay {

     background-color: transparent;

}

This works if I add this style directly on the component/page the popup is declared. 

However, this obviously applies the style for the whole page the dialog is on, therefore, if I have a different dialog on the same page the overlay for this second dialog will also be affected. I have tried applying a CssClass to the SfDialog declaration and updating my css style accordingly, unfortunately the CssClass  is applied to the div wrapping the dialog's content and not the dialog container itself (Where the overlay is nested). This means that, as far as I can tell, I cannot use CssClass to apply a unique style to the overlay.

I have also tried using .NET 5's css isolation feature to style the overlay on a single component but it does not get applied. I have attached a sample demonstrating the three scenarios.

This leaves me with three questions:

• Is there a way to close a non-modal SfDialog when something outside of the dialog is clicked?
• How can I use the CssClass property of SfDialog or Css Isolation files to style the overlay? 
• Is there another control being used the SfSchedule quick info popup available for use? This would be more in line with what I am trying to achieve.

Thanks in advance. 

Lee.

Attachment: Dialog__Overlay_Styling_de1b51c5.zip

[Revanth Krishnan]

Hi Lee, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your queries 

 

Query 1:  “Is there a way to close a non-modal SfDialog when something outside of the dialog is clicked?” 

 

The modal dialog’s overlay style can be set to make the dialog look like a non-modal dialog using the ‘CssClass’ property and the ‘OnOverlayClick’ event can be used to close the dialog on clicking outside of the dialog. We have modified the shared sample for your reference, 

 

Code Snippet: 

 

<a rel='nofollow' href="" @onclick="LinkClicked" @onclick:preventDefault> Open Modal popup with transparent</a> 

 

<SfDialog @bind-Visible="IsOpen" Width="100" ShowCloseIcon="false" IsModal="true" CssClass="transparentCssPopup"> 

    <DialogEvents OnOverlayClick="@OverlayClick"></DialogEvents> 

    <DialogTemplates> 

        <Header> <h1> css popup </h1></Header> 

        <Content> 

            <p>Overlay should be transparent and click outside dialog to close the dialog</p> 

        </Content> 

    </DialogTemplates> 

</SfDialog> 

 

<style> 

    .transparentCssPopup + .e-dlg-overlay { 

        background-color: transparent; 

    } 

</style> 

 

@code { 

 

    public bool IsOpen { get; set; } 

 

    private void LinkClicked(MouseEventArgs args) 

    { 

        IsOpen = true; 

    } 

 

    /// <summary> 

    /// anywhere outside the control clicked 

    /// </summary> 

    private void OverlayClick(MouseEventArgs args) 

    { 

        IsOpen = false; 

    } 

} 

 

Query 2: How can I use the CssClass property of SfDialog or Css Isolation files to style the overlay? 

 

You can use the ‘CssClass’ property to set the styles for each of the different dialog overlays. We have prepared a sample for your reference, 

 

Code Snippet: 

 

<SfDialog @bind-Visible="IsOpen" Width="100" ShowCloseIcon="false" IsModal="true" CssClass="greenCSSPopup"> 

     . . . 

</SfDialog> 

 

<style> 

    .greenCSSPopup + .e-dlg-overlay { 

        background-color: green; 

    } 

</style> 

Note: The ‘+’ is used to apply the CSS styles for the class to the next element. 

 

Query 3: “Is there another control being used the SfSchedule quick info popup available for use? This would be more in line with what I am trying to achieve.” 

 

The component used in the SfSchedule quick info popup is the Dialog. You can achieve your requirement using the Dialog component as suggested in the above queries. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/163749/ze/Dialog__Overlay_Styling_de1b51c5757142964 

 

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

 

Regards, 

Revanth 

[Lee Stevens]

Thanks for all the info Revanth, worked a treat. 

Didn't think about using the "after" css selector.

[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 further assistance. 

 

Regards, 

Revanth