CODEWITHSUNDEEP
jqueryjquery-ui
Sreejesh Kumar
Sreejesh Kumar

Reputation: 2499

jquery modal dialog positioning at scrollable window

My page consists of bulk of data which I have to scroll down to the bottom for button click which will fire the jquery modal dialog. On the button click i had set the windowscroll position to top of the page and hidden the window scrollbar. But I am unable to position the modal dialog to the center position of the window, but positioned to the center of the document.

I have given the code like below :

$(settings.dialogDivId).dialog({
        open: function () {
            window.scrollTo(0, 0);
            $('body').css({ 'overflow': 'hidden', 'height': '100%' });

        },
        width: 400,
        modal: true,
        position: ['center', 'center'],
        buttons: {
            Ok: function () {
                $(this).dialog("close");
                $('body').css({ 'overflow': 'inherit', 'height': 'auto' });
                postbackCtrl.attr("data-validation-override", true);
                window.scrollTo(0, 0);
                postbackCtrl.click();
            },
            Cancel: function () {
                postbackCtrl.attr("data-validation-override", false);
                $(this).dialog("close");
                window.scrollTo(0, 0);
                $('body').css({ 'overflow': 'inherit', 'height': 'auto' });
            }
        }
    });

Upvotes: 0

Views: 1639

Answers (1)

Donovan Charpin
Donovan Charpin

Reputation: 3397

Place your modal dialog with position : relative if you want it to be centered in relation to its parent or fixed for it to be put in relation to the window.

After playing with left and margin-left :

If your modal width: 200px, you have to place your modal left : 50% and put a margin-left:-100px. Now, your modal dialog is centered horizontally.

http://jsfiddle.net/ArxAG/17/

Upvotes: 1

Related Questions