Twitter Bootstrap v2.0.4 (bootstrap-modal.js v2.0.4) でも同じ問題が発生しました。解決策にたどり着くには、2 つの問題を修正する必要があります。
問題
- 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 に対する私の修正です。