web-dev-qa-db-ja.com

Bootstrap=モーダルz-index

問題は：私はparrallxスクロールを使用しているため、Bootstrapでこのように見えるようにすることでボックスモーダルをポップアップしようとすると、ページにz-indexが表示されます。 https://www.dropbox.com/s/42tzvfppj4vh4vx/Screenshot%202013-11-11%2020.38.36.png

ご覧のように、ボックスモーダルは上になく、マウスをクリックすると無効になります。このCSSコードを無効にすると：

#content {
    color: #003bb3;
    position: relative;
    margin: 0 auto;
    width: 960px;
    z-index: 300;
    background: url('../images/parallax-philosophy-ltl.png') top center;
}

ボックスモーダルが機能します。 Bootstrap default .modalはz-index：1050なので、他のすべてのコンテキストの上にない理由を理解できません。

それはボックスモーダルです：

   <section id="launch" class="modal hide fade">
    <header class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h3>אשר הגעה לחתונה  </h3>
    </header>
    <div class="modal-body">
        <form method="post" action="/update" id="myForm2">
            <input type="radio"  id="yes_arrive" name="arrive" checked="checked" value="yes">מגיע<br>
            <p><input type="text" required name="fsname" value="" placeholder="הכנס שם פרטי ומשפחה "></p>
            <p>כמה אנשים מגיעים?   </p>
            <select name="number" id="number">
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>

            </select>
            <hr/>
            <input type="hidden" name="title" id="title" value="{{title}}">
            <input type="radio" name="arrive" id ="no_arrive" value="no">לא מגיע
            <p>סיבה לאי הגעה</p>
            <input type="text" name="no_arrive_reason" placeholder="קצר ולעניין, לא שדה חובה">
            <hr/>
            <p class="submit"><input type="submit" name="submit" value="שלח"></p>

        </form>
    </div>
    <footer class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal">Close</button>
    </footer>
</section>

トップメニューから彼をトリガーします：

  <li><a class="launch" data-toggle="modal" href="#launch">Approve</a></li>

先に感謝します。

編集

誰かが同じ問題に該当する場合の解決策が見つかりました。これが方法です：モーダルを含むセクションまたはdivにdata-backdrop = "false"を追加します。例：<section id="launch" class="modal hide fade in" data-backdrop="false">灰色の背景がそのように得られないことに注意してください。それはちょっと汚い解決策であり、より良い解決策を聞いて喜んでいるでしょう。

javascriptjqueryhtmlcsstwitter-bootstrap
25
Dagan Bog-Computers

問題は、ほとんどの場合、「ネストされた」z-indexに関係しています。例として：

<div style="z-index:1">
  some content A
  <div style="z-index:1000000000">
    some content B
  </div>
</div>
<div style="z-index:10">
  Some content C
</div>

z-indexのみを見ると、B、C、Aが期待されますが、Bは明示的に1に設定されたdivにネストされているため、C、B、Aとして表示されます。

Position：fixedを設定すると、その要素とそのすべての子のz-indexがロックされるため、問題を解決できるのは変更することです。

解決策は、z-indexが設定されている親要素を見つけ、設定を調整するか、レイヤーとその親コン​​テナーが希望どおりにスタックするようにコンテンツを移動することです。 FirefoxのFirebugの右端には「レイアウト」という名前のタブがあり、すぐに親要素に移動して、z-indexが設定されている場所を確認できます。

28
Jon

同様の問題があったので、この質問を見つけました。 data-backdropは問題を「解決」します。マークアップに別の問題が見つかりました。

このモーダルを起動するボタンがありましたおよびモーダルダイアログ自体はフッターにありました。問題は、フッターがnavbar_fixed_bottom、およびposition:fixed。

ダイアログを固定セクションの外に移動した後、すべてが期待どおりに機能しました。

16
Sam Ruby

モーダルダイアログは、そのz-indexプロパティをオーバーライドすることで最上部に配置できます。

.modal.fade {
  z-index: 10000000 !important;
}
8
Martin Staufcik

さて、このエントリは非常に古いにもかかわらず。今週、ブートストラップのモーダルを使用していて、この「問題」に遭遇しました。私の解決策は何らかの形ですべてを混ぜ合わせたもので、誰かに役立つかもしれないのでそれを投稿するだけです:)

最初にZ-index warをチェックして修正を取得してください！

最初のあなたができることは、モーダル背景を無効にすることです。前にStackoverflowの投稿がありましたが、それを失いました。ただし、HTMLコードでは次のようになります。

<!-- from the bootstrap's docs -->
<div class="modal fade" tabindex="-1" role="dialog" data-backdrop="false">
  <!-- mind the data-backdrop="false" -->
  <div class="modal-dialog" role="document">
    <!-- ... modal content -->
  </div>
</div>

secondアプローチは、ブートストラップのモーダルイベントにイベントリスナーをアタッチすることでした。これはどういうわけかあなたが考えるほどきれいではありませんが、おそらく自分でいくつかのトリックを使うとうまくいくかもしれません。この利点は、要素がイベントリスナーをアタッチし、イベントリスナーがアタッチされている限り、それを完全に忘れることができることです:)

var element = $('selector-to-your-modal');

// also taken from bootstrap 3 docs
$(element).on('shown.bs.modal', function(e) {
  // keep in mind this only works as long as Bootstrap only supports 1 modal at a time, which is the case in Bootstrap 3 so far...
  var backDrop = $('.modal-backdrop');
  $(element).append($(backDrop));
});

second.1アプローチは、基本的に以前のものと同じですが、イベントリスナーはありません。

それが誰かを助けることを願っています！

3
Arnulfo Solis Ramirez

私もこの問題を抱えていました。問題は、bootstrap js：

<div class="modal-backdrop fade in"></div>

この行は、<body>要素の終わりの直前に作成されます。これにより、「z-indexスタック要素の問題」が発生します。 bootstrap .jsはこの要素を間違って作成します。mvcレイアウトページにある場合、このスクリプトはまだ同じ問題を引き起こします。前にこの行をhtmlに挿入します...

this.$backdrop = $(document.createElement('div'))
    .addClass('modal-backdrop ' + animate)
    .appendTo(this.$body)

SOソリューションIS bootstrap.jsの修復-モーダルの一部：

.appendTo(this.$body)  
//REPLACE TO THIS:
 .insertBefore(this.$element)
1
Miroslav Siska

このスクリプトを試してください：

function addclassName(){
setTimeout(function(){
            var c = document.querySelectorAll(".modal-backdrop");
            for (var i = 0; i < c.length; i++) {
                c[i].style.zIndex =  1040 + i * 20  ;
            }
            var d = document.querySelectorAll(".modal.fade");
            for(var i = 0; i<d.length; i++){
                d[i].style.zIndex = 1050 + i * 20;
            }
}, 10);

}

0
kunal singh

特に、Bootstrap 4。

動作を修正するには、オーバーライドするCSSを追加する必要があります。

.pane-center{
    z-index:inherit !important;
}
0
Marc Magon

それでは、bootstrap-rtl.cssを使用している場合、次のクラス。modal-backdropに移動してz-index属性を削除してください。その後はすべてうまくいくはずです

0
Mohammed Nafie