69

ブートストラップ モーダルは、Android と iOS で正しく機能しません。課題トラッカーは問題を認識していますが、有効な解決策を提供していません:

2.0 のモーダルはモバイルでは壊れています。

2.0 のモーダル ウィンドウが正しく配置されない

画面は暗くなりますが、モーダル自体はビューポートに表示されません。ページの上部で見つけることができます。この問題は、ページを下にスクロールしたときに発生します。

これは、bootstrap-responsive.css の関連部分です。

.modal {
    position:fixed;
    top:50%;
    left:50%;
    z-index:1050;
    max-height:500px;
    overflow:auto;
    width:560px;
    background-color:#fff;
    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;
    margin:-250px 0 0 -280px;
}

適用できる修正はありますか?

4

12 に答える 12

64

編集:レスポンシブ/モバイルの問題に対処するために、非公式の Bootstrap Modal の修正が作成されました。これはおそらく、問題を解決する最も簡単で簡単な方法です。

それ以来、あなたが以前に議論した問題の1つに修正が見つかりました

のbootstrap-responsive.css

.modal { 
    position: fixed; 
    top: 3%; 
    right: 3%; 
    left: 3%; 
    width: auto; 
    margin: 0; 
}
.modal-body { 
    height: 60%; 
}

そしてbootstrap.css

.modal-body { 
    max-height: 350px; 
    padding: 15px; 
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch; 
 }
于 2012-05-30T04:56:44.637 に答える
14

ギルの答えは有望です（彼がリンクしたライブラリ）---しかし、当分の間、モバイルデバイスで下にスクロールしても機能しません。

CSSファイルの最後にあるCSSのスニペットだけを使用して、自分で問題を解決しました。

@media (max-width: 767px) {
  #content .modal.fade.in {
    top: 5%;
  }
}

#contentセレクターは単に私の html をラップする id であるため、Bootstrap の特異性をオーバーライドできます (モーダル html をラップする独自の id に設定されます) 。

欠点:モバイル デバイスの垂直方向の中央に配置されていません。

利点:表示され、小さいデバイスでは適度なサイズのモーダルが画面の大部分を占めるため、「中央に配置されていない」ことはそれほど明白ではありません。

機能する理由:

Bootstrap のレスポンシブ CSS で画面サイズが小さい場合、画面が小さいデバイスでは、.modal.fade.inの「top」が「auto」に設定されます。何らかの理由で、モバイル Webkit ブラウザーは、「自動」割り当てで垂直方向の配置を把握するのに苦労しているようです。したがって、固定値に戻すだけでうまく機能します。

モーダルは既に position: absolute に設定されているため、値はドキュメントの高さではなく、ビューポートの高さに相対的であるため、ページの長さやスクロール先に関係なく機能します。

于 2012-09-02T06:42:30.783 に答える
4

問題 2130のniftylettuce による解決策は、すべてのモバイル プラットフォームでモーダルを修正するようです...

2012 年 9 月 1 日更新: 修正は次の場所で更新されました: twitter ブートストラップ jquery プラグイン

(以下のコードは古いですが、まだ動作します)

// # Twitter Bootstrap modal responsive fix by @niftylettuce
//  * resolves #407, #1017, #1339, #2130, #3361, #3362, #4283
//   <https://github.com/twitter/bootstrap/issues/2130>
//  * built-in support for fullscreen Bootstrap Image Gallery
//    <https://github.com/blueimp/Bootstrap-Image-Gallery>

// **NOTE:** If you are using .modal-fullscreen, you will need
//  to add the following CSS to `bootstrap-image-gallery.css`:
//
//  @media (max-width: 480px) {
//    .modal-fullscreen {
//      left: 0 !important;
//      right: 0 !important;
//      margin-top: 0 !important;
//      margin-left: 0 !important;
//    }
//  }
//

var adjustModal = function($modal) {
  var top;
  if ($(window).width() <= 480) {
    if ($modal.hasClass('modal-fullscreen')) {
      if ($modal.height() >= $(window).height()) {
        top = $(window).scrollTop();
      } else {
        top = $(window).scrollTop() + ($(window).height() - $modal.height()) / 2;
      }
    } else if ($modal.height() >= $(window).height() - 10) {
      top = $(window).scrollTop() + 10;
    } else {
      top = $(window).scrollTop() + ($(window).height() - $modal.height()) / 2;
    }
  } else {
    top = '50%';
    if ($modal.hasClass('modal-fullscreen')) {
      $modal.stop().animate({
          marginTop  : -($modal.outerHeight() / 2)
        , marginLeft : -($modal.outerWidth() / 2)
        , top        : top
      }, "fast");
      return;
    }
  }
  $modal.stop().animate({ 'top': top }, "fast");
};

var show = function() {
  var $modal = $(this);
  adjustModal($modal);
};

var checkShow = function() {
  $('.modal').each(function() {
    var $modal = $(this);
    if ($modal.css('display') !== 'block') return;
    adjustModal($modal);
  });
};

var modalWindowResize = function() {
  $('.modal').not('.modal-gallery').on('show', show);
  $('.modal-gallery').on('displayed', show);
  checkShow();
};

$(modalWindowResize);
$(window).resize(modalWindowResize);
$(window).scroll(checkShow);
于 2012-08-29T15:21:32.263 に答える
3

このコードを使用して、Bootstrapモーダルダイアログが開いたときに中央に配置します。これを使用している間、iOSで問題は発生していませんが、Androidで機能するかどうかはわかりません。

$('.modal').on('show', function(e) {
    var modal = $(this);
    modal.css('margin-top', (modal.outerHeight() / 2) * -1)
         .css('margin-left', (modal.outerWidth() / 2) * -1);
    return this;
});
于 2012-05-09T17:09:00.773 に答える
1

このプロパティを JavaScript でグローバルに追加できます。

if( navigator.userAgent.match(/iPhone|iPad|iPod/i) ) {
    var styleEl = document.createElement('style'), styleSheet;
    document.head.appendChild(styleEl);
    styleSheet = styleEl.sheet;
    styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);
 }
于 2015-08-26T17:49:32.910 に答える
0

2012 年 9 月 5 日に試してみましたが、必ずデモをチェックしてください

問題 2130 の niftylettuce による解決策は、すべてのモバイル プラットフォームでモーダルを修正するようです...

2012 年 9 月 1 日更新: 修正は次の場所で更新されました: twitter ブートストラップ jquery プラグイン

ここにデモへのリンクがあり ますそれは私が使用したコードです

            title_dialog.modal();
            title_dialog.modalResponsiveFix({})
            title_dialog.touchScroll();
于 2012-09-06T04:09:01.100 に答える