Dialog Pop up Position

[Chong Yee Mei]

Hi,

Would like to know if there are any settings on the Dialog control that when it pops up, it will be center of the screen? Especially when the page has been scrolled halfway. As currently, it is now popping up on the top of the page.

[Jagan Prakash Vasu Devan]

Hi Chong,

 

Thanks for your update.

 

We would like to let you know that Dialog popup will be appeared in the center of the browser window by default. We have used $(window).scroll() function to set the Dialog popup in fixed position. The Css property position is used here to set Dialog’s position. If you set this property as fixed, then Dialog popup will appear in the middle of the page even you scroll. Refer the below work around to display Dialog popup in center of the browser window.

 

<script>

    $(window).scroll(function () {

 

       $("#dialogposition_wrapper").css({ 'position': 'fixed' });

 

    });

script>

 

Note: Here dialogposition is Id of the Dialog control

 

Please find the attached sample.

 

Regards,

Jaganprakash

Attachment: Dialog_position_66a3c9a0.zip

[Chong Yee Mei]

Hi,

Thanks for the info, the dialog box is indeed scrolling together when the page scrolls. 

But, there are still two issues we need resolved.

1) When page scrolls, dialog box follows, but when i move the dialog box, then scroll, the dialog box goes haywire.

2) When the page is already scrolled halfway, then the dialog box is triggered to show, it still shows at the top of the page, not at the scrolled position.

[Jagan Prakash Vasu Devan]

Hi Chong,

 

Thanks for your update.

 

We have modified the code as per your requirements. We have set the position of the Dialog box with respect to the scroll bar position in positioned() function. Initially Dialog box will be in the middle of the page and the position of the scroll bar is (0,0). Position of the scroll bar is calculated and added with the position of the Dialog while scrolling. Therefore if the page is scrolled, then the Dialog will also be scrolled. We have used position property to set X and Y value to Dialog box. The reported issues are resolved as follows.

 

Now when you move the Dialog box, then scroll the page, It will automatically appear in the middle of the page. Because positioned() is called inside $(window).scroll() function.

 

When the page is already scrolled halfway, then the dialog box is triggered to show, X and Y values should be set to Dialog box accordingly. We have used a Button to trigger the Dialog box. Close the Dialog box and click that button to open the Dialog box again. Now it will appear at the middle of the page even the page was scrolled halfway. Because positioned() function is called in the click() function. Refer the following code.

 

[ASPX]

<ej:Dialog ID="dialogposition" runat="server" Title="Dialog">

<ej:ToggleButton ID="ToggleButton1" runat="server" DefaultText="Dialog" ClientSideOnClick="click">ej:ToggleButton>

<script>

        function click() {

            var dialogObj = $("#dialogposition").data("ejDialog");

            dialogObj.open();

            positioned();

        }

        function positioned() {

            var windowpostop = $(window).scrollTop();

            var windowposleft = $(window).scrollLeft();

            $("#dialogposition").ejDialog({ position: { X: windowposleft + 553, Y: windowpostop + 282 } });

        }

        $(window).scroll(function () {

            positioned();

        });

  script>

 

Please find the attached sample.

 

Regards,

Jaganprakash

Attachment: Dialog_position_b61f62c9.zip

[Chong Yee Mei]

Hi, 

Thanks, this works now.

[Rajaveni]

Hi  Chong Yee Mei

 

Thanks for the Update.

 

Please let us know if you have any other queries.

 

Regards,

Rajaveni

[Surentslkajd]

Can you please send code for ASP.NET MVC

[ASPX]

<ej:Dialog ID="dialogposition" runat="server" Title="Dialog">

<ej:ToggleButton ID="ToggleButton1" runat="server" DefaultText="Dialog" ClientSideOnClick="click">ej:ToggleButton>

<script>

        function click() {

            var dialogObj = $("#dialogposition").data("ejDialog");

            dialogObj.open();

            positioned();

        }

        function positioned() {

            var windowpostop = $(window).scrollTop();

            var windowposleft = $(window).scrollLeft();

            $("#dialogposition").ejDialog({ position: { X: windowposleft + 553, Y: windowpostop + 282 } });

        }

        $(window).scroll(function () {

            positioned();

        });

  </script>

my code looks like this.

    <div id="userInfoPopup" >

    @{Html.EJ().Dialog("ViewUserInfo").Title("Information").Items(data =>

    {

        data.ContentTemplate(@<div style="margin: 5px 14px;">@Html.Partial("Information/UserInformation")</div>);

    }).ShowRoundedCorner(true).ShowOnInit(false).EnableModal(true).EnableResize(false).Width(450).Render();}

    </div>

[Surentslkajd]

My Script is:

        function onclickStatus(e) {

            var wp = $("#target").data("ejWaitingPopup");

            wp.show();

            positioned();

            var grid = $("#MGrid").ejGrid("instance");

            var index = $(e).closest("tr").index();

            var record = grid.getCurrentViewData()[index];

            var data = {

                index: index,

                model: record,

            };

            $.ajax({

                type: "POST",

                url: '@Url.Action("SMStatus", "M")',

                contentType: "application/json; charset=utf-8",

                data: JSON.stringify(data),

                dataType: "json",

                success: successFunc,

                error: errorFunc

            });

        }

[Ezhil S]

Hi Sudheer,

Thank you for contacting Syncfusion support.

The solution provided to position the Dialog in the center window for ASP.NET can be used for ASP.NET MVC as well. We have set the position of the Dialog box with respect to the scroll bar position in positioned() function. Initially Dialog box will be in the middle of the page and the position of the scroll bar is (0,0). When you scroll the page, It will automatically position to the middle of the page since positioned() is called inside $(window).scroll() function. Replace the ID of the Dialog control in script and implement the positioned method where you open the Dialog popup window. Also we are unable to find the code on where the Dialog pop up is opened in the shared script code WaitingPopup is shown. If this is not your requirement please explain your requirement on positioning MVC control.

To position the dialog based on your shared code we have prepared a sample using Dialog in MVC and it can be downloaded from the link below:
http://www.syncfusion.com/downloads/support/forum/117274/ze/Dialog_f117274778376744

Please let us know if you have any other queries.

Regards,
Ezhil S

[Surentslkajd]

Hi Chong,

 

Thank you for you response. I am able to make pop up in center when they scroll but 

 there are still two issues we need resolved.

1) When page scrolls, dialog box follows, but when i move the dialog box, then scroll, the dialog box goes haywire.

2) When the page is already scrolled halfway, then the dialog box is triggered to show, it still shows at the top of the page, not at the scrolled position.

I want address this two issues in MVC I tried the code given below to resolve this issues but its not working for me that's why I shared my code so that you can suggest me what to do to address this issue.

Thank you

[Surentslkajd]

I found a easy solution for this issue. 

 var dialog = $("#dialogposition").ejDialog("open");

$("#dialogposition_wrapper").css({'position': 'fixed'}).css({'top' : '200px'});

No need to use scroll function you can simple use when you call function to open.

[Ezhil S]

Hi Sudheer,
Thanks for sharing your solution to set Dialog position to center.
This will help someone looking for this behavior.
Please get back to us if you have any other queries.
Regards,
Ezhil S