bootstrap中dialog水平垂直居中

标签：

方法一：

HTML:

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

JavaScript:

// Do like this for more best user experience,
// But you have to remove dialog "fade" class(Used animation)
$("[role=‘dialog‘]").on("shown.bs.modal", function() {
    var $modalDialog = $(this).find(".modal-dialog"),
        $modalBody = $(this).find(".modal-body"),
        dialogHeight = $modalDialog.height(),
        dialogWidth = $modalDialog.width(),
        windowHeight = $(window).height(),
        windowWidth = $(window).width();

    // When dialog height greater than window height,
    // use default margin top value to set dialog position.
    if (windowHeight < dialogHeight) {
        // do nothing
        return;
    }

    // When dialog height less than window height,
    // dialog position set it with vertical center.
    $modalDialog.css({
        "position": "absolute",
        "top": "50%",
        "left": "50%",
        "marginLeft": - ( dialogWidth / 2 ),
        "marginTop": - ( dialogHeight / 2 )
    });
});

注：这种方式最好将fade class去掉，否则会有不好的用户体验

方式二：修改bootstrap.js源码

      that.$element
        .addClass(‘in‘)
        .attr(‘aria-hidden‘, false)

      that.enforceFocus()
/***************************************************************/
      var $modalDialog = that.$element.find(".modal-dialog"),
          dialogHeight = $modalDialog.height(),
          windowHeight = $(window).height(),
    
      // When dialog height greater than window height,
      // use default margin top value to set dialog position.
      if (windowHeight < dialogHeight) {
          // do nothing
          return;
      }
    
      // Dialog position set it with vertical center.
      $modalDialog.css({
          "marginTop": ( windowHeight - dialogHeight) / 2
      });
/**************************************************************/
      var e = $.Event(‘shown.bs.modal‘, { relatedTarget: _relatedTarget })

注：块级注释间为增加代码，在bootstrap中722行

bootstrap中dialog水平垂直居中

标签：

原文地址：http://my.oschina.net/jak/blog/387693