Azure AD B2C Customizing loading screen for Custom Policy

user_14579273 0
Viewed 994

I'm creating a custom policy and I'm trying to customize the behavior when the policy is loading between different pages. Currently, the behavior is that the screen darkens and some text is displayed that overlaps with the rest of the UI. If possible, I'd like to display some completely different HTML content during loading. So far, I've been unable to affect the loading content in the same way that I've been able to affect the rest of the UI.

I have been able to see that a couple divs do appear during loading with IDs "simplemodal-overlap" and "simplemodal-container", and I've attempted to modify these divs using JQuery in the HTML file I've provided to Azure for the custom policy, but nothing I've done seems to have affected those divs in any way.

Has someone customized the loading UI for a custom policy before and can they give me advice on how I can affect its behavior?

azure-ad-b2c-custom-policy azure-ad-b2c
1 Answers

Actually, the div with id: simplemodal-overlap is added/removed from HTML page by B2C dynamically: enter image description here

So you can't capture it directly via JS code. If you just want to change its CSS display, you can just overwrite it on your custom page, on my side, I just use the code below to change its color to grey:

enter image description here

If you want to do more things on it by JS, you can add an event listener to monitor if a dom node with id simplemodal-overlap has been added into your html body. See code below:

<script>
 $('body').on('DOMNodeInserted', function(e) {
        if($(e.target).attr('id') == 'simplemodal-overlay'){
            
            $(e.target).css({"background":"green","font-size":"100px"});
                        $(e.target).html("LOADING !!!!!")
        }
    });

</script>

enter image description here

Result:

enter image description here

user_101894590
Related