这是网站的链接:
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/