web-dev-qa-db-ja.com

ブートストラップ：特定のモーダルに対してのみモーダル背景の不透明度を変更

複数のモーダルのメニューがあります。重ねて開くと、背景が黒くなり、見苦しくなります。 bootstrap.cssの_.modal-backdrop.fade.in_のfilter: alpha(opacity=80);を変更する必要があることを理解しています。ただし、すべてのモーダルではなく、一部のモーダルのみを変更する必要があります。最初のモーダルのhtmlコードは次のとおりです。

_    <div class="modal hide" id="mbusModal">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h3>MBUS</h3>
        </div>
        <div class="modal-body">
            <form class="form-horizontal">
                <form class="well form-inline">
                    <input type="button" class="btn" onclick="$('#dinMbusModal').modal('show'); $('#tabsMbusDin a:last').tab('show');" value="din">
                </form>
            </div>
        <div class="modal-footer">
            <a href="#" class="btn" data-dismiss="modal">Закрыть</a>
            <a href="#" class="btn btn-primary" onclick="addPort('mbus',$('#mbusDev').val(),$('#mbusSpeed').val()); $('#mbusModal').modal('hide')">Применить</a>
        </div>
_

このモーダルは、彼の背景を変更する必要があります。

_    <div class="modal hide" id="dinMbusModal" style="width: 500px; margin: -250px 0 0 -250px;">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h3>DIN</h3>
        </div>
        <div class="modal-body">
        </div>
        <div class="modal-footer">
            <a href="#" class="btn" data-dismiss="modal">Закрыть</a>
            <a href="#" class="btn btn-primary" onclick="addPort('din_mbus',,); $('#dinMbusModal').modal('hide')">Применить</a>
        </div>
    </div>
_
javascriptjquerycssjquery-pluginstwitter-bootstrap
19
Timofey Trofimov

背景がModalプラグインによってオンザフライで生成されるという事実により、少し複雑になります。可能な方法の1つは、showイベントを取得したときに本体にクラスを追加し、hidden。

何かのようなもの：

CSS

.modal-color-red .modal-backdrop {
  background-color: #f00;
}
.modal-color-green .modal-backdrop {
  background-color: #0f0;
}
.modal-color-blue .modal-backdrop {
  background-color: #00f;
}

JS

$('.modal[data-color]').on('show hidden', function () {
  $('body').toggleClass('modal-color-'+ $(this).data('color'));
});

HTML

<div class="modal hide fade" id="redModal" data-color="red">...</div>
<div class="modal hide fade" id="greenModal" data-color="green">...</div>
<div class="modal hide fade" id="blueModal" data-color="blue">...</div>

JSFiddle

31
merv

CSS/HTMLのみ

JSFiddle： http://jsfiddle.net/szoys6d7/

[〜＃〜] html [〜＃〜]

<div class="modal hide fade modal2">...</div>

[〜＃〜] css [〜＃〜]

.modal2.fade.in ~ .modal-backdrop.fade.in {
background-color: #f00; }
6
romelmederos

モーダルのhtmlマークアップは次のとおりです。

<div id="my-modal" class="modal hide fade">
    ....
</div>

Htmlファイルのスタイル要素内でこのスタイルを使用します

<style>
    #my-modal>.modal-backdrop.fade.in
    {
        opacity: .1; 
    }
</style>

そしてスクリプト

<script type="text/javascript">
    $(document).ready(function(){
        $("#my-modal").modal({
            show: true
        });
    });
</script>
3
mickeymoon

angular ui bootstrap：

初期化時にbackdropClassを使用します。

$modal.open({templateUrl:'',
controller:'',
backdropClass:''
});

http://angular-ui.github.io/bootstrap/versioned-docs/0.12.0/

1
Alexandr Ryazantsev

永遠に私を連れて行ったが、私はワンライナーを見つけた。

$(window).load(function(){
    // remove greying background bootstrap modal effect
    $(".modal-backdrop ").attr('class', 'someClass');

});

クラスを削除すると、モーダルが削除されました。ただし、名前を変更しても機能は維持されますが、背景のグレー表示は取り除かれます。

0
AllieCat

モーダルに個別のクラスを与える

そして、あなたが必要なのは：

.yourclass {background：rgba（0、0、0、0.8）; }

0
Mindaugas