Position of modal dialogs #452

santiquiss opened this Issue Oct 20, 2011 · 10 comments

9 participants


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


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
var h = that.$element.outerHeight();
// put corrected margin
// ------------------------------------------------------
// 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


This is my refresh function for the moment :)

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


  return this
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

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;

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


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?


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


@martin-g got it, thanks!


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

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.