We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Dialog Pop up Position

Thread ID:

Created:

Updated:

Platform:

Replies:

117274 Sep 22,2014 03:34 AM Jul 7,2015 08:49 AM ASP.NET Web Forms 11
loading
Tags: Dialog
Chong Yee Mei
Asked On September 22, 2014 03:34 AM

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 [Syncfusion]
Replied On September 22, 2014 09:10 AM

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
Replied On September 22, 2014 10:33 PM

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 [Syncfusion]
Replied On September 23, 2014 08:04 AM

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
Replied On September 24, 2014 01:10 AM

Hi, 

Thanks, this works now.

Rajaveni [Syncfusion]
Replied On September 26, 2014 12:41 AM

Hi  Chong Yee Mei

 

Thanks for the Update.

 

Please let us know if you have any other queries.

 

Regards,

Rajaveni


Surentslkajd
Replied On July 2, 2015 12:56 PM

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
Replied On July 2, 2015 01:20 PM

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 [Syncfusion]
Replied On July 3, 2015 08:00 AM

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
Replied On July 6, 2015 10:44 AM

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
Replied On July 6, 2015 12:43 PM

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 [Syncfusion]
Replied On July 7, 2015 08:49 AM

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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;