web-dev-qa-db-ja.com

背景の下に表示されるブートストラップモーダル

Bootstrapの例から直接私のモーダル用のコードを使用し、bootstrap.jsのみを含めました(bootstrap-modal.jsは含まない)。しかし、私のモーダルは灰色のフェード(背景)の下に表示されており、編集できません。

これは次のようなものです。

modal hiding behind backdrop

この問題を再現するoneの方法については this fiddle をご覧ください。そのコードの基本構造は次のとおりです。

<body>
    <p>Lorem ipsum dolor sit amet.</p>    

    <div class="my-module">
        This container contains the modal code.
        <div class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">Modal</div>
                </div>
            </div>
        </div>
    </div>
</body>
body {
    padding-top: 50px;
}

.my-module {
    position: fixed;
    top: 0;
    left: 0;
}

これがなぜなのか、またはこれを修正するために私ができることは何ですか?

524
natlines

モーダルコンテナが固定位置または相対位置にある場合、または固定位置または相対位置の要素内にある場合は、この動作が発生します。

モーダルコンテナとそのすべての親要素が、問題を解決するためのデフォルトの方法に配置されていることを確認してください。

これを行うには、いくつかの方法があります。

  1. 最も簡単な方法は、モーダルdivを移動して、特別な配置を持つ要素の外側に移動することです。 1つ良い場所は、終了ボディタグ</body>の直前です。
  2. あるいは、問題が解決するまで、position: CSSプロパティをモーダルとその祖先から削除することもできます。ただし、これによってページの外観や機能が変わる可能性があります。
568
Muhd

問題は、親コンテナの配置に関係しています。表示する前に、これらのコンテナからモーダルを簡単に「移動」できます。あなたがjsを使ってモーダルをshowしていたならば、これを行う方法は次のとおりです。

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

あるいは、ボタンを使用してモーダルを起動する場合は、.modal('show');をドロップして以下のようにします。

$('#myModal').appendTo("body") 

これは通常の機能をすべて維持し、ボタンを使ってモーダルを表示できるようにします。

332
Adam Albright

私は上で提供されたすべてのオプションを試しましたが、それらを使って動作するようにそれを得ませんでした。

うまくいったこと: .modal-backdropのz-indexを-1に設定。

.modal-backdrop {
  z-index: -1;
}
154

また、BootStrap cssとjsのバージョンが同じであることを確認してください。異なるバージョンでは、モーダルを背景の下に表示させることもできます。

例えば:

悪い:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

良い:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
148
Sid

私はこの問題にも遭遇しました、そして私が実際に背景が必要ではないと思うまで解決策のどれも私のために働きませんでした。以下のコードで簡単に背景を削除できます。

<div class="modal fade" id="createModal" data-backdrop="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>Create Project</h4>
            </div>
            <div class="modal-body">Not yet made</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

data-backdrop属性はfalseに設定する必要があります( 他のオプションstaticまたはtrue)。

99
PieterVK

モーダルウィンドウAFTERを開くときに高いz-index値を与えることでうまくいくようになりました。例えば。:

$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");
58
Andrew Dyster

@Muhdが提供する解決策がそれを実行するための最良の方法です。しかし、ページの構造を変更することが選択肢にならないような状況で立ち往生している場合は、次のトリックを使用してください。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"
                aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">...</div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

ここでのトリックはdata-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);"です。デフォルトの背景を削除し、ダイアログ自体の背景色をアルファで設定してダミーの背景を作成します。

更新1: @Gustynが指摘したように、背景をクリックしてもダイアログが閉じないことが予想されている。そのためには、Javaスクリプトコードを追加する必要があります。これを実現する方法の例をいくつか示します。

$('.modal').click(function(event){
    $(event.target).modal('hide');
});
30
Krishnendu

これは遅いが、これは一般的な解決策です -

    var checkeventcount = 1,prevTarget;
    $('.modal').on('show.bs.modal', function (e) {
        if(typeof prevTarget == 'undefined' || (checkeventcount==1 && e.target!=prevTarget))
        {  
          prevTarget = e.target;
          checkeventcount++;
          e.preventDefault();
          $(e.target).appendTo('body').modal('show');
        }
        else if(e.target==prevTarget && checkeventcount==2)
        {
          checkeventcount--;
        }
     });

このリンクにアクセスしてください - Bootstrap 3 - 固定サイドバーを使用するとモーダルが背景の下に表示されなくなります - .

15
Rohan

2行のCSSを追加するだけです。

.modal-backdrop{z-index: 1050;}
.modal{z-index: 1060;}

.modal-backdropは、ナビゲーションバーで設定するために1050の値を持つべきです。

10
Wahyu Primadi

これにアプローチする他の方法は、bootstrap.cssの.modal-backdropからz-indexを削除することです。これにより、背景はあなたの体の他の部分と同じレベルになり(それでもフェードします)、あなたのモーダルは一番上になります。

.modal-backdropはこんな感じです

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000000;
}
10
Samuel Bergeron

私は簡単に設定しました:

#myModal {
    z-index: 1500;
}

そしてそれは動作します....

元の質問の場合:

.my-module {
    z-index: 1500;
}
8
AmintaCode

この問題は、CSSのグラデーションのようなものを背景やアコーディオンヘッダのようなものに使用するときによく発生します。

残念ながら、コアのBootstrap CSSを変更または上書きすることは望ましくなく、望ましくない副作用を引き起こす可能性があります。最も邪魔にならない方法はdata-backdrop="false"を追加することですが、フェード効果が期待通りに機能しなくなったことに気付くかもしれません。

Bootstrapの最近のリリースを追った後、バージョン3.3.5はこの問題を解決し、望ましくない副作用はないようです。

ダウンロード: https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.Zip

CSSファイルと3.3.5からのJavaScriptファイルを必ず含めてください。

7

私はこの問題を抱えていて、それを修正する最も簡単な方法はmodal-dialog divで1040より大きいaddind z-indexでした:

<div class="modal-dialog" style="z-index: 1100;">

私はブートストラップが私の場合z-index 1040を持つdiv modal-backdropフェードを作成すると信じています、あなたがこれの上にmodal-dialogを置くならば、それはもう灰色にならないはずです。

6
Chris Rosete

こんにちは私は同じ問題を抱えていた私はあなたがbootsrap 3.1を使用するときにbootsrapの古いバージョン(2.3.2)とは異なり、モーダルのhtml構造が変更されたことを実現する!

モーダルヘッダのボディとフッタをmodal-dialogとmodal-contentでラップする必要があります

<div class="modal hide fade">

  <div class="modal-dialog">
    <div class="modal-content">

    **here goes the modal header body and footer**

    </div>
  </div>

 </div>
6
talsibony

私の場合はそれを解決し、これを私のスタイルシートに追加します。

.modal-backdrop{
  z-index:0;
}

グーグルデバッガーでは、要素BACKDROPを調べることができますし、属性を変更します。グーグ運。

5
Ckevyn Ovalle

もっと軽くて良い解決策があります。

CSSスタイルを追加することで簡単に解決できます。

  1. クラス.modal-backdropを隠す(Bootstrap.jsから自動生成)

    .modal-backdrop
    {
    display:none;
    visibility:hidden; 
    position:relative
    }
    
  2. .modalの背景を半透明の黒い背景画像に設定します。

    .modal
    {
    background:url("http://bin.smwcentral.net/u/11361/BlackTransparentBackground.png")
    // translucent image from google images 
    z-index:1100; 
    }
    

モーダルを</body>タグの近くではなく要素の内側に置く必要があるという要件がある場合、これは最もうまくいきます。

5
JM Tee

あなたのモーダルでこれを使用してください:

data-backdrop="false" 
5
Jonathan

これは、アニメーションや予想される動作を乱すことなく、すべてのモーダルをカバーします。

$(document).on('show.bs.modal', '.modal', function () {
  $(this).appendTo('body');
});
5
Cam Tullos

z-index .modalを最大値に設定します

たとえば、.sidebarwrapperのzインデックスは1100なので、.modalのzインデックスを1101に設定します。

.modal {
    z-index: 1101;
}
5
A Mohudum Kamil

上記の提案された解決策のどれも私のために働きませんでした、しかしこの技術は問題を解決しました:

$('#myModal').on('shown.bs.modal', function() {
   //To relate the z-index make sure backdrop and modal are siblings
   $(this).before($('.modal-backdrop'));
   //Now set z-index of modal greater than backdrop
   $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
}); 
5
Javed Iqbal
$('.modal').insertAfter($('body'));
3
user109764

絶対位置を相対位置に変更します。

.modal-backdrop {
    position: relative;
    /* ... */
}
3
Aristeu Roriz

モーダル背景を削除しました。

.modal-backdrop {
    display:none;
}

これはより良い解決策ではありませんが、私にはうまくいきます。

3
CodeBriefly

あなたのナビゲーションバーではnavbar-fixed-topz-index = 1041を必要とし、またbootstarp-combined.min.cssを使用する場合は.navbar-fixed-top, .navbar-fixed-bottomz-index to 1041も変更します

3
Mohsin

.modal-backdropからz-indexを削除することもできます。結果のCSSはこのようになります。

.modal-backdrop {
}
  .modal-backdrop.in {
    opacity: .35;
    filter: alpha(opacity=35); }
3

私が見つけたのはそれです:

ブートストラップ3.3.0では正しくありませんが、ブートストラップ3.3.5では正しいことがわかります。letはコードを見ます。 3.3.0:

this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
    .prependTo(this.$element)

3.3.5

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

私の場合は、次のようなラッパーがあります。

.wrapper { margin: 0 auto; position:relative; z-index:1;overflow:hidden;}

Z-index:1を削除しただけで、なぜ問題が解決したのかわかりません。また、確実に相対位置を削除しましたが、それが必要でした。

2
hsobhy

これは私のために働いた:

sass: 
  .modal-backdrop
    display: none
  #yourModal.modal.fade.in
    background: rgba(0, 0, 0, 0.5)
2
Dapeng114

以下のスタイルをDIVタグに追加することでこれを修正しました

style="background-color: rgba(0, 0, 0, 0.5);"

そしてカスタムCSSを追加

.modal-backdrop {position: relative;}
2
RaymondLe

私の場合、原因はbootstrap.min.css :)でした。参照としてHTMLファイルから除外した後、ダイアログはモーダルシェードの形式で表示されます。

2
xLanUserx

私にとって最も簡単な解決策は、絶対位置と.modal-backdropより高いzインデックスを持つラッパーにモーダルを入れることでした。モーダル背景(少なくとも私の場合)はz-index 1050です。

.my-modal-wrapper {
  position: absolute;
  z-index: 1060;
}
<div class="my-modal-wrapper"></div>
2
sivi911

クラスの.modal-openオーバーフロー値をhiddenからvisibleに上書きしてみてください。

.modal-open {
    overflow: visible;
}
1
wefra

これを試してみてください https://github.com/nakupanda/bootstrap3-dialog/releases/tag/v1.34.0

Bootstrap Modal 3.3.0は、メイン要素の内側にモーダル背景を生成しますが、以前はbody要素に追加されていました。

お役に立てれば。

1
Nakupanda

これをあなたのページに追加してください。それは私のために働きます。

<script type="text/javascript">
    $('.modal').parent().on('show.bs.modal', function (e) { $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
</script>
1
Takei

Davide Lorigliolaのように、私はz-indexをクランキングすることによってそれを修正しました:.modal-backdrop {z-index:-999999; }

残念ながらS.O.私が彼にコメントしたり投票したりすることを禁じているので、私はここでさらに別の解決策でそう言うのを強いられます。

1
James Nielson

私は同じ問題を抱えていて、またMuhdの答えをチェックしました。

しかし、私のモーダルはleft、top属性が必要なので、固定位置を絶対位置に変更するだけでうまくいきました。

.modal {
    position: absolute;
}
1
Jeong-min Im

この現象は、閉じられていないタグ、特に閉じられていない</div>がある場合に発生することがあります。あなたは自分のモーダルがどこにあるのかを見直し、すべてのタグが適切に閉じられていることを確認するか、div modalを</body> tag Enclosureの直前にページの一番下に移動します。

1
user28864

このコードをCSSに試してみてください。

.modal-open { overflow: hidden !important; }
.modal-open *{ position:unset; z-index: 0; }
.modal-open .modal-backdrop { position: fixed; z-index: 99998 !important; }
.modal-open .modal { position: fixed; z-index: 99999 !important; }

例:

    $(window).on('load', function() {
      
/* Latest compiled and minified JavaScript included as External Resource */
$(document).ready(function() { $('.modal').modal("show"); });

    });
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
    padding-top: 50px;
}

.my-module {
    position: fixed;
    top: 0;
    left: 0;
    border: 1px solid red;
}

.modal-open { overflow: hidden !important; }
.modal-open *{ position:unset; z-index: 0; }
.modal-open .modal-backdrop { position: fixed; z-index: 99998 !important; }
.modal-open .modal { position: fixed; z-index: 99999 !important; }
<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Bootstrap 3 Template</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <script type="text/javascript" src="//code.jquery.com/jquery-compat-git.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/normalize.css">

    <link rel="stylesheet" type="text/css" href="/css/result-light.css">

      <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
      <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">


</head>
<body class="modal-open">
    <div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et augue sed lorem laoreet vehicula sit amet eget tortor. Donec in turpis gravida, commodo mauris ac, gravida neque. Proin eget tristique lorem. Integer tincidunt sem sit amet metus ultricies, vitae placerat dui gravida. Pellentesque viverra, nunc imperdiet egestas imperdiet, magna massa varius arcu, vitae iaculis tortor quam vitae arcu. Fusce posuere non lectus vel cursus. In rutrum sed dui non sollicitudin. Proin ante magna, imperdiet ac nisl ut, rhoncus pellentesque tortor.</p>

    <p>Cras ac velit vitae elit tempus tempus. Nullam eu posuere leo. In posuere, tortor et cursus ultrices, lorem lacus efficitur dolor, a aliquet elit urna sed tortor. Donec dignissim ante ex, non congue ex efficitur sit amet. Suspendisse lacinia tristique odio, vel sagittis dui tempor tempus. Quisque gravida mauris metus, sed aliquam lacus sollicitudin sit amet. Pellentesque laoreet facilisis scelerisque. Nunc a pulvinar magna. Maecenas at mollis tortor.</p>

    <p>Vivamus ultricies, odio sed ornare maximus, libero justo dignissim nulla, nec pharetra neque nulla vel leo. Donec imperdiet sem sem, eu interdum justo tincidunt finibus. Vestibulum lacinia diam gravida risus luctus, elementum blandit dui porttitor. Quisque varius lacus et tempor faucibus. Nam eros nunc, gravida eu tellus eget, placerat porta leo. Duis tempus ultricies felis sit amet cursus. Nunc egestas ex non lacus laoreet tincidunt. Sed malesuada placerat elementum. Mauris eu rutrum nulla. Nunc consequat lacus eget libero tincidunt, in semper eros accumsan. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse eu tincidunt quam, ut tincidunt eros. Donec luctus velit ac nulla lacinia malesuada.</p>

    <p>Vestibulum id mi in urna lacinia mollis. Pellentesque sit amet mauris ullamcorper, suscipit dolor in, lacinia leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Vivamus sollicitudin tempus massa sed molestie. Nullam quis neque vel nunc convallis porta a laoreet ex. Aliquam tempus hendrerit turpis eleifend convallis. Cras enim eros, fermentum sed velit eget, dignissim malesuada augue. Fusce ut fermentum nisl, vel imperdiet libero. Etiam luctus arcu volutpat turpis finibus pulvinar eget in augue. Integer sapien nisi, scelerisque ultrices quam sit amet, aliquam placerat neque. Morbi consequat porttitor lacus, quis pulvinar dolor aliquam ut. Ut et dolor id est iaculis lobortis nec aliquet nisl.</p>

    <p>Nunc et tortor cursus, ullamcorper justo vitae, ullamcorper sapien. In fringilla urna quam, et finibus ipsum finibus eu. In fermentum turpis ut eros semper, non gravida purus ornare. Praesent vehicula lobortis lacinia. Vivamus nec elit libero. Suspendisse porta neque ut erat tempor rhoncus. Nunc quis massa in ante rhoncus bibendum. Nam maximus ex vitae orci luctus scelerisque. Sed id mauris iaculis, scelerisque mauris feugiat, vehicula ipsum. Duis semper erat ac nulla sodales gravida. Suspendisse nec sapien pharetra, scelerisque odio in, dignissim erat. Aenean feugiat sagittis eros, in mattis orci tristique lacinia. Phasellus posuere id neque sed mattis. Morbi accumsan faucibus ullamcorper.</p>    
    
    
<div class="my-module">
    This is a container for "my-module" with some fixed position. The module contains the modal code.
<div class="modal fade in" aria-hidden="false" style="display: block;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body…</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
    
</div>
</div>
</body></html>
0
cuneyttnc

_modal.scssファイルからposition:fixedスタイルを削除しただけで、問題はありません。私はまだ背景があり、それは予想通りに動作します。

// Modal background
.modal-backdrop {
  /* commented out position: fixed - bug fix */
  //position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $zindex-modal-backdrop;
  background-color: $modal-backdrop-bg;
  // Fade for backdrop
  &.fade {
    opacity: 0;
  }

ガイダンスについてはRick Strahlに敬意を表します: https://weblog.west-wind.com/posts/2016/Sep/14/ Bootstrap-Modal -Dialog-showing-under-Modal-Background

0
Glade Mellor

以前の回答によると、これは私にとっていくつかの理由で起こり得ることです。問題は知らないうちに2つの異なるBootstrapリンクを参照していたので、どちらかを削除すると問題が解決します。

私の場合はこれを含めました:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
      integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">

もう1つはオフラインのもので、既にラップトップにあります。

0
Sadmi
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 kumar

あなたは回避策を作ることができますがこれはすべてのページからフェードを削除します。モーダルはfbポップアップのようにポップアップします。モーダルを開いた後

 $('.modal-backdrop').removeClass('modal-backdrop');
0
user2489259

私はSharepoint 2013 Modalブートストラップを使用しているIphoneとIpadでこのような問題をいくつか抱えていました。

私はJSでこれを使うだけです:

$('#myModal').on('shown.bs.modal', function() {
   //To relate the z-index make sure backdrop and modal are siblings
   $(this).before($('.modal-backdrop'));
   //Now set z-index of modal greater than backdrop
   $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
}); 
0
NicK Kamimura

私はiOSデバイスだけで同様の問題を抱えていました。

解決策はparent element から-webkit-overflow-scrolling: touchを削除することでした

0
Mo.