web-dev-qa-db-fra.com

bootstrap: modifie l'opacité de la toile de fond modale uniquement pour des modaux spécifiques

J'ai un menu avec plusieurs modaux. Lorsque j'en ouvre un sur un autre, il devient noir en arrière-plan, ce qui est moche… .. Je comprends qu'il me faut changer filter: alpha(opacity=80); dans .modal-backdrop.fade.in dans bootstrap.css Mais je dois le changer non pas pour tous les modaux, mais pour certains d'entre eux. Voici le code html pour le premier 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>

Ce modal doit changer sa toile de fond:

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

Un peu compliqué par le fait que la toile de fond est générée à la volée par le plugin Modal. Une façon de le faire consiste à ajouter une classe au corps lorsque vous obtenez un événement show, puis à le supprimer du hidden.

Quelque chose comme:

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

UNIQUEMENT 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

Voici le balisage HTML pour votre modal

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

Utilisez ce style dans un élément de style de votre fichier html

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

et le script

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

Pour le bootstrap UI angulaire:

Utilisez backdropClass Lors de l’initialisation:

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

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

1
Alexandr Ryazantsev

Ça m'a pris pour toujours, mais j'ai trouvé un one-liner. 

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

});

Le retrait de la classe a supprimé le modal. Mais renommer conserve la fonctionnalité mais supprime le gris en arrière-plan.

0
AllieCat

Donnez à vos modaux des classes séparées

Et tout ce dont vous avez besoin c'est:

.votre classe {arrière-plan: rgba (0, 0, 0, 0,8); }

0
Mindaugas