HTML Structure and DOM Placement
Independently on where it is initialized, the HTML of the Dialog will be appended as a child of the document <body> element.
The following example demonstrates the possible markup and a possible placement of the Dialog component.
<body>
<div id="container1">
@(Html.Kendo().Dialog()
.Name("dialog")
.Content("Content of the Dialog")
)
...
</div>
<div id="container2">
...
</div>
</body>
<body>
<div id="container1">
<kendo-dialog name="dialog">
<content>
Content of the Dialog
</content>
</kendo-dialog>
...
</div>
<div id="container2">
...
</div>
</body>
The following example demonstrates how the markup of the page from the previous example changes after the initialization of the Dialog when the widget is moved to become a child of the <body> and its additional markup (the wrapper and the title bar) is generated.
<body>
<div id="container1">
...
</div>
<div id="container2">
...
</div>
<div class="k-widget k-dialog k-window">
<div class="k-window-titlebar">...</div>
<div id="dialog" class="k-content">
Content of the Dialog
</div>
</div>
</body>