modal-dialog的彈框居中

在作項目時候,須要將bootstrap的modal dialog居中,便查詢,網上說直接修改源代碼便可javascript

     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的屬性css

$(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      });   })});
相關文章
相關標籤/搜索