web-dev-qa-db-de.com

bootstrap: Ändern Sie die modale Hintergrunddeckkraft nur für bestimmte Modale

Ich habe ein Menü mit mehreren Modalen. Wenn ich einen über einem anderen öffne, wird der Backgrount schwarz, was hässlich ist. Ich verstehe, dass ich filter: alpha(opacity=80); in .modal-backdrop.fade.in in bootstrap.css ändern muss. Aber ich muss es nicht für alle Modalitäten ändern, nur für einige. Hier ist der HTML-Code für den ersten Modal

    <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>

Dieser Modal muss seinen Hintergrund ändern:

    <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>
18

Etwas kompliziert durch die Tatsache, dass die Kulisse durch das Modal-Plugin im laufenden Betrieb erzeugt wird. Eine Möglichkeit, dies zu tun, besteht darin, dem Body eine Klasse hinzuzufügen, wenn Sie ein show -Ereignis erhalten und es dann auf hidden entfernen.

So etwas wie:

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

29
merv

NUR 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

Hier ist das HTML-Markup für Ihr Modal

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

Verwenden Sie diesen Stil innerhalb eines Stilelements in Ihrer HTML-Datei

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

und das Skript

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

Für eckige Ui-Bootstrap:

Verwenden Sie backdropClass, Wenn Sie initialisieren:

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

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

1

Ich habe ewig gebraucht, aber ich habe einen Einzeiler gefunden. 

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

});

Beim Entfernen der Klasse wurde der Modal entfernt. Bei der Umbenennung bleibt die Funktionalität erhalten, der Hintergrund wird jedoch grau.

0
AllieCat

Geben Sie Ihren Modalen separate Klassen

Und alles was Sie brauchen ist:

.Ihre Klasse {Hintergrund: rgba (0, 0, 0, 0,8); }

0
Mindaugas