CODEWITHSUNDEEP
javascriptcssjquery-ui-dialoghallo-js
juminoz
juminoz

Reputation: 3218

jQuery UI Dialog Position Fixed Center

I'm trying to display the dialog in modal mode at the center of the page with position fixed, but I'm not able to get it to work properly. As a workaround, I currently set

position: "top"

so at least it's stuck to the top of the viewport. When I use center option, it simply uses the 50% of the height as top property. Since my pages are around 7000px, it's way out of the viewport and user is not able to see it.

Does anyone have a good suggestion on how to achieve this? I have tried CSS option, but since top property is set dynamically, CSS is simply not taking any effect.

I have also tried centering it to the overlay, but since ui-overlay element doesn't exist until the modal is initialized, I'm not able to use it as an archer for centering.

Just FYI, I'm trying to do this as a workaround for positioning bug of link widget of hallojs.

Upvotes: 0

Views: 1576

Answers (1)

KellyCode
KellyCode

Reputation: 797

You could center it to the window. I made a jQuery method that'll handle that. Not sure why you need it to have a fixed position unless you want the user to still be able to scroll the window with the modal showing? Here's the jQuery centering extension:

(function($)
{
$.fn.centerMe = function(centerIn)
{
    var containerWidth = $(centerIn).width();
    var containerHeight = $(centerIn).height();
    var elWidth = $(this).width();
    var elHeight = $(this).height();
    $(this).css('left', containerWidth / 2 - elWidth / 2);
    var adjTop = containerHeight / 2 - elHeight / 2;
    $(this).css('top', $(parent.window.document).scrollTop() + adjTop);
};
})(jQuery);

Usage is $('#myToBeCenteredElement').centerMe(window); The thing to be centered would normally be display:none; somewhere on the page. You show it and center it, etc.

The element to be centered needs to have absolute positioning.

I've also made this another one of these to catch window scroll events and adjust accordingly.

Upvotes: 0

Related Questions