web-dev-qa-db-ja.com

Twitter bootstrapモーダルがフォームの前に開いています

Twitterに問題がありますbootstrapモーダル：フォームの前で開きます。3日前に非常にうまく機能していたので、何をしたのかわかりません。 。フォームに書き込むことができます。フォームは機能していると思います。問題は、フォームの前にあるモーダル開口部です。

http://dl.dropbox.com/u/41175751/Screen%20Shot%202012-03-28%20at%2012.04.11.png

formsmodal-dialogtwitter-bootstrap
25
Nielsen Rechia

.modal-backdropクラスのz-indexは1040に設定され、navbar-fixed-topのz-indexは1030に設定されています。したがって、背景がフォーム上に表示されます。

CSSファイルの.modal-backdrop z-index値を、navbarz-indexよりも小さい値に設定してオーバーライドします。これで問題が解決します。

13
Girish Ramarao

同様の問題がありました。私はここでそれらに対処しました： http://jsfiddle.net/ATeaH/8/

10
CloudMagick

ニールセンが私のために働いた上記の簡単な解決策...

divを持っていました。モーダルをinside navbarにアタッチしました。 divをナビゲーションバーの外に移動しました-<body>のすぐ下に移動しました

問題が解決しました！

5
jasop

モーダルがAJAXを介してDOMに挿入されているという同様の問題が発生しました。ページを更新しないと、モーダルはマスクの後ろに残り、アクセスできませんでした。

興味深いことに、モーダルはページの更新で正常に機能しました。 HTMLの場合と同じ場所にモーダルをAJAXで挿入していましたが、AJAXでは機能しませんでした。修正はモーダルの部分を本体に追加することでした。次のとおりでした：

$('body').append(....j render partial....);

出くわした他の提案のいくつかを試しましたが（z-indexを微調整するなど）、私の場合は役に立ちませんでした。

0
bigtex777

この解決策を試してみてください、それは私のために働きました：

$('#myModal').appendTo("body").modal('show');
0
santosh kore

私はAngularJSを使用していますが、同じ問題が発生しました。明確にするために、私のモーダルはAngular実行時にng-viewを介してDOMに挿入する別のHTMLファイルにありました。この問題の原因は、cssアニメーションクラスがあったことです。私のng-viewがあったdiv。例として：

<div ng-app="myApp">
    <div class="pageTransition" ng-view></div> <!-- problem: class="pageTransition"-->
</div>

Cssクラスを削除すると問題が修正され、モーダルが通常の動作順序に復元されました。これを回避する解決策は、標準クラスをAngularの ng-class に置き換えることです。このようにして、モーダルの使用中にクラスを動的に追加、変更、または削除できます。

0
ejborges

SASSを使用している場合は、内部で次のことを実行できます_ modals.scss：

.modal-dialog {
  position: relative;
  z-index: $zindex-modal-background; // copy-pasted z-index from .modal-backdrop
  width: auto;
  margin: 10px;
}
0
adamj

以下をCSSに追加します

 .modal-dialog {
    z-index: 1050;
 }
0
Cas Bloem

私はこれと同じ問題を抱えていました。私の場合、それは私のヘッダーの閉じられていないdivが原因でした。

0
Sepp Ludger