web-dev-qa-db-ja.com

bootstrap=モーダルオーバーレイを削除する方法？

特定のモーダルのモーダルオーバーレイを削除する方法bootstrap.

twitter-bootstrapbootstrap-modal
13
Manigandaprabhu

追加 data-backdrop="false"モーダルを開くボタンの属性としてのオプション。

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-backdrop="false">
  Launch demo modal
</button>

モードオプション を参照してください

28
Mario Shtika

次のスニペットを使用して、shown.bs.modalイベントがトリガーされます。

<script type="text/javascript">
  $('#modal-id').on('shown.bs.modal', function () {
      $(".modal-backdrop.in").hide();
   })
</script>
8
Manigandaprabhu

設定することもできます

.modal-backdrop {
   background-color: transparent;
}

あなたのCSSでbootstrap=機能の外側をクリックしても動作します。

3
Duka

Jqueryを使用してbootstrap modalを扱う場合は、イベントコールバック関数で以下のコードを使用することをお勧めします。

$('.modal-backdrop').remove();
2
vitthal

JavaScript（jquery）で関数clickを使用している場合。あなたが使用している：

$("#myBtn2").click(function(){
    $("#myModal2").modal({backdrop: false});
});
1
TungHarry

背景は、次のクラスで発生します：.modal-backdrop追加の.in不透明度のクラス。

デフォルト値（必要に応じて編集）：

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
}
.modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: .5;
}
1
Aibrean