Position of modal dialogs #452

Closed
santiquiss opened this Issue Oct 20, 2011 · 10 comments

9 participants

@santiquiss

I suggest adding a refresh function to modals to recalculate the negative margins so it's always positioned in the center of the screen

@ldbglobe

a quick hack can be apply for auto center modal dialog

add those line one the show function after the line

$that = this;
// ------------------------------------------------------
// Hack for autopositionning and prevent oversize
// ------------------------------------------------------
// active automatic scrolling when content is too long
that.$element.find('.modal-body').css({'max-height':$(window).height()-150, overflow:'auto'});
// display modal, extract height and hide it again
that.$element.show(); 
var h = that.$element.outerHeight();
that.$element.hide();
// put corrected margin
that.$element.css({'margin-top':-Math.round(h/2)})
// ------------------------------------------------------
// Hack end
// ------------------------------------------------------

But I also think that a refresh fonction should be better
So just have to call it before show, after shown, and triggered on window resize event

@santiquiss

This is my refresh function for the moment :)

refresh: function (e) {
  e && e.preventDefault()
  var modal = this.$element

  modal.css('margin-top',(modal.outerHeight()/2)*-1)
       .css('margin-left',(modal.outerWidth()/2)*-1)

  return this
}
@fat
Bootstrap member

For now we're trying to leave as much positioning as possible in the css.

if your height content is dynamic i recommend try one of simple methods above :)

@fat fat closed this Oct 30, 2011
@EricWarnke

For the JavaScript inept (often myself), you can apply @santiquiss's method like this. I modified it slightly.

$('#your-modal').on('shown', function(e) {
    var modal = $(this);

    modal.css('margin-top', (modal.outerHeight() / 2) * -1)
         .css('margin-left', (modal.outerWidth() / 2) * -1);

    return this;
});
@mikaelgramont

For those new to jquery plugins (like me)...
in order to get @santiquiss 's refresh function to be called, I added the following in the Modal class definition, after the delegate call:

this.$element.on('shown', $.proxy(this.refresh, this));

Works like a charm!
@adamjgrant adamjgrant pushed a commit to adamjgrant/kickstart that referenced this issue Mar 22, 2012
Divya Manian removing concatinated css files from wherever they are linked to with…
… link tag. Fixes #452
a834488
@geekimposter

Hi,

I'm using @EricWarnke's suggestion. I notice that the modal appears then re-adjusts (centers). The the modal jerks a bit into the correct, centered position. How can I fix this so that the modal appears centered with no visible movement (e.g, adjustment) to the user?

@martin-g

@sounalath You can fix that by listening on 'show' event, not on 'shown'.

@geekimposter

@martin-g got it, thanks!

@thegreatmichael

Thanks @EricWarnke and @martin-g working for me too!

@daveobriencouk daveobriencouk pushed a commit to egocreative/bootstrap that referenced this issue Nov 18, 2012
Divya Manian removing concatinated css files from wherever they are linked to with…
… link tag. Fixes #452
e3367bc
@klickagent

To center the bootstrap dialog I came up with a full css soution: http://tweaks.klickagent.ch/#30.05.2014_TwitterBootstrapCenterModal

@cvrebert cvrebert locked and limited conversation to collaborators Jun 9, 2014
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.