Viewing DOM for Modal Dialog When it is Absent on Internet Explorer
You might have observed and wondered why the DOM of Modal Dialog is not displayed when you inspect it in IE Browser. This article explains how to enable DOM in this situation.
On this Page:
What is a DOM?
DOM denotes the Document Object Model. When a web page is loaded, the browser creates a DOM for the page. The HTML DOM model is constructed as a tree of Objects. You need to Press F12 to view the DOM in the Developer Tools.
The following figure depicts the relationship between root element and attribute.
What is a Modal Dialog?
A modal dialog is a window that opens in certain scenarios where user must select an option or enter the required details without which they cannot proceed in using the application.
Typically, on the web, a modal is displayed at the center of the screen and rest of the UI elements of the screen are unavailable to work.
Example: While working on a Microsoft Word document, if you want to exit Word before saving, a modal dialog opens where you need to click one of the following buttons:
Save
Don't Save
Cancel
In this case, if you do not select any of these options, the word document does not close.
Earlier, to open the ModalDialog, you can use window.showModalDialog (JavaScript method). However, this method is no more supported by all the leading browsers: Chrome, Edge, Firefox, and Opera.
Internet Explorer supports this method, but does not cover all of its scenarios. Hence, the window.open method is an alternative to the window.showModalDialog method.
Enabling the DOM for Modal Dialog When Inspect fails to Display
When F12 is pressed on the WebDialog, the Developer Tools window does not open as shown in the below screenshot:
Perform the following Steps to Enable the DOM for Modal Dialog When Inspect fails to Display:
Find the object that is used to open the Model Dialog window.
Inspect the object and identify the JavaScript function name in it, which opens the window.
Press F12 to open Debugger.
Search for the identified function.
Add a breakpoint in the function.
Click the object.
When the breakpoint is hit, switch to Console.
Run -> window.showModalDialog = window.open.
Click the Debugger tab and Press F8
Close the DevelopersTool.
When window opens, press F12 on the window.
You can now see the DOM of the window as shown below.