如何使 Twitter Bootstrap 的模式在 iPhone 上正确显示？答案

【问题标题】：How do I make Twitter Bootstrap's modal appear properly on the iPhone?如何使 Twitter Bootstrap 的模式在 iPhone 上正确显示？
【发布时间】：2012-08-26 18:35:55
【问题描述】：

这里是网站的链接： http://daisy.camorada.com/

当你点击“文章”按钮时，它会弹出带有模态的 Twitter Bootstrap，而在 iPhone 上它不能正常显示，我如何让模态在 iPhone 上正常显示？

我不确定这是 JavaScript、Bootstrap 还是 CSS 问题。

提前感谢您的帮助，

编辑：我所说的“正确显示”的意思如下：我希望 iphone 显示引导模式在计算机上的显示方式。这是模态在计算机浏览器上的外观截图：

这是它在 iphone 上的外观，我希望 iphone 像上面的示例一样显示它：

【问题讨论】：

“无法正确显示” 不能很好地描述问题。您需要对此进行扩展 - 可能包括正在发生的事情和您期望发生的事情的屏幕截图。
可能重复？：stackoverflow.com/questions/12067802/…
@MyHeadHurts 感谢您指出这一点，请参阅上面的屏幕截图编辑。
@merv 很好的发现，看起来类似的问题。我会调查的。

标签： javascript css twitter-bootstrap

【解决方案1】：

我在使用 Twitter Bootstrap v2.0.4 (bootstrap-modal.js v2.0.4) 时遇到了同样的问题。有两个问题需要解决才能达到解决方案。

问题

CSS：模态类 (.modal) 设置为 { top: 50%; }。这会使模态显示在屏幕外。
JS：如果向下滚动页面，模态背景可能无法正确填满屏幕。模式必须在页面顶部打开。

解决方案

CSS

@media only screen and (max-width: 479px) {
.modal {
  position: absolute;
  top: 16%; // ADJUSTMENT MADE HERE
  left: 50%;
  z-index: 1050;
  width: 300px;
  margin: -240px 0 0 -150px;
  overflow: auto;
  background-color: #ffffff;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, 0.3);
  *border: 1px solid #999;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
     -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
          box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding-box;
          background-clip: padding-box;
}
}

在bootstrap.js中调整模态显示：function()

show: function () {
    var that = this
      , e = $.Event('show')

    that.oldWindowPosition = $(window).scrollTop(); // 
    $('body, html').scrollTop(0); // ADD THIS LINE 

    this.$element.trigger(e)

    if (this.isShown || e.isDefaultPrevented()) return

    $('body').addClass('modal-open')

    this.isShown = true

    escape.call(this)
    backdrop.call(this, function () {
      var transition = $.support.transition && that.$element.hasClass('fade')

      if (!that.$element.parent().length) {
        that.$element.appendTo(document.body) //don't move modals dom position
      }

      that.$element
        .show()

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

      that.$element.addClass('in')

      transition ?
        that.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) :
        that.$element.trigger('shown')

    })
  }

再次，这是我对 Twitter Bootstrap 2.0.4 的修复

【讨论】：