How to position the Dialog box to center of page on scrolling?

Description

 Open a dialog on the center of the screen and maintain the center positioning on scrolling the page that have large content.

Solution

Consider a web page with large content to be scrolled, a dialog appears on the visible area at the moment which gets hidden on scrolling the content. That is the dialog position will remain same as when it is opened so that it can’t be viewed in visible area on scrolling. To resolve this behavior and make the dialog to be viewed on the screen even on scrolling, set the dialog control wrapper CSS position as fixed and mention the top value. This will make the dialog to be shown in center of screen on scrolling the content of the web page. Refer the following code sample.

ASPX 

 
<ej:Dialog ID="detailcol" Title="Details" runat="server" Width="530" ShowOnInit="false">
    <DialogContent>
        My dialog content here
    </DialogContent>
</ej:Dialog>
 
<ej:Button runat="server" ID="Button1" Text="Details" ClientSideOnClick="dialogOpen"></ej:Button>
 
<script type="text/javascript">
function dialogOpen(args) {
       $("#<%=detailcol.ClientID%>").ejDialog(”open”);
    }
</script>
<style type="text/css">
@* get the wrapper div of dialog control by appending '_wrapper' to its ID*@
        #<%=detailcol.ClientID%>_wrapper {
            position: fixed !important;
            top: 200px !important;
        }
    </style>