Azure B2C Styling - access id or class that references the processing your request overlay

Question

I am custom styling an implementation of Azure B2C. I am having difficulty finding the class or id that I can target to style the semi-transparent overlay that appears with the text "Please Wait While We Process Your Information". Does anyone know how I can target this? I cannot find it referenced in the Microsoft documentation: https://learn.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-reference-ui-customization

Answer 1

I haven't found out how to target the overlay but the text itself can be targeted with the id #verifying_blurb

Answer 2

If you need to see what is the overlay's element id, this is how I got to it:

Open Chrome Developer tools and type this command in the Console:

setTimeout(function(){debugger;}, 3000)

This will give you 3 seconds until the debugger starts and freezes the screen.

Wait a little bit and click the Continue button let's say in your B2C Profile Edit page. This button saves the profile edit you just did which in turn will load the overlay with the message:

"Please wait while we process your information."

Now you're able to select the Element (in this case the overlay).

• Note that you have to time your action accordingly so that when you click the button the timeout seconds you set is in sync with your action.

Check the screenshot below:

By the way: the element right now is this one:

<div id="simplemodal-overlay"
     class="simplemodal-overlay"
     style="opacity: 0.6; height: 815px; width: 1440px; position: fixed; left: 0px; top: 0px; z-index: 1001;">
</div>