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

当您单击“文章”按钮时,它会弹出带有模式的Twitter Bootstrap,并且在iPhone上无法正确显示,如何使模式在iPhone上正确显示?

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

在此先感谢您的帮助,

编辑:
我所说的“正确显示”如下:
我希望iphone显示引导程序模式,它在计算机上的显示方式。
这是该模式在计算机浏览器上的屏幕截图:

这是它在iPhone上的外观,我希望iPhone像上面的示例一样显示它:

最佳答案

我在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;
}
}


JS

在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的修复

关于javascript - 如何使Twitter Bootstrap的模式正确显示在iPhone上?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/12132832/

10-14 15:37
查看更多