modal-dialog的弹框居中

在做项目时候,需要将bootstrap的modal dialog居中,便查询,网上说直接修改源代码即可

     that.$element
        .show()
        .scrollTop(0)

      that.adjustDialog()

      if (transition) {
        that.$element[0].offsetWidth // force reflow
      }

      that.$element.addClass('in')

      //2015.11.24 modify by lsp modal dialog align center
      var $modalDialog = that.$element.find(".modal-dialog")
        var dialogHeight = $modalDialog.height()
        var 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;
        // }

        // When dialog height less than window height,
        // use margin top set it position.
        // Dialog position set it with vertical center.
        if (windowHeight > dialogHeight) {
          $modalDialog.css({
            "marginTop": ( windowHeight - dialogHeight) / 2
          });
      }
      //end
      
      that.enforceFocus()

      var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })

  

有时候需要修改modal的属性

$(document).ready(function(){
$('#myModal').modal("hide");
$('#myModal').on('show.bs.modal', function() {//捕获show事件
var dialogWidth = $('.modal-dialog img').get(0).width;
var dialogHeight = $('.modal-dialog img').get(0).height;
$('.modal-dialog').css({
"width":dialogWidth,
"height":dialogHeight
});
})
});
posted @ 2015-11-24 00:45  ronaldo918  阅读(1426)  评论(0编辑  收藏  举报