Est-il possible de personnaliser le style de bootstrap $ modal

Dans mon application que je suis en utilisant bootstrap $modal popup deux moments différents. contenu de pop-ups est différente donc de la taille de deux pop-up doit être également différent. J'ai essayé de style $modal à l'aide de

.modal {
    display: block;
    position: absolute;
    left: 60%;
    height: 88%;
    width: 28%;
    overflow-y:auto;
    overflow-x:auto;
    border-radius: 0px;
}

mais comme prévu, il est en train de changer de style de mes deux pop-ups. Est-il possible d'appliquer une classe différente pour chaque popup?

Merci d'avance.

source d'informationauteur Aditya Ponkshe

css twitter-bootstrap

Si vous avez accès au format HTML, vous pouvez ajouter une classe supplémentaire pour les modaux comme <div class="modal custom"> ensuite, vous pouvez définir le style comme .modal.custom. Exemple complet ci-dessous

Travail De Démonstration

HTML

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">
  Variable Modal
</button>

<!-- Modal -->
<div class="modal custom fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
   ....

CSS

.modal.custom .modal-dialog {
    width:50%;
    margin:0 auto;
    /*add what you want here*/
}

Laissez-moi savoir si vous avez d'autres questions dans les commentaires.

0

Dans le Bootstrap, les auxiliaires modaux va automatiquement changer de taille en fonction de la taille du contenu. Si c'est tout ce dont vous avez besoin, BS fait pour vous...

Si vous voulez le style de chaque modal de façon autonome, vous souhaitez utiliser un id tag en plus à la classe modal balises. Vous pouvez faire référence à ce id dans votre CSS avec un #.

par exemple
```
#modalblue {
  background-color:blue;
}
#modalgreen {
  background-color:green;
}
```
et le balisage est
```
<div class="modal" some-other-attributes id="modalblue">
  ...modal content
</div>
<div class="modal" some-other-attributes id="modalgreen">
  ...modal content
</div>
```

Vous pouvez voir ici que vous pouvez donner un id pour chaque modal.
Voici un exemple:

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#green-modal">
  Launch demo modal
</button>

<div class="modal fade" id="green-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</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>
</div>

Modal #2

 <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#red-modal">
  Launch demo modal
</button>

<div class="modal fade" id="red-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</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>
</div>

Maintenant, vous pouvez facilement cibler votre css à l'aide de cet identifiant. E. g.

#green-modal { background-color: #00FF00; }
#red-modal { background-color: #FF0000; }

Espère que cela aide.

            <div id="addtaskmodal" class="modal hide fade" tabindex="-1" role="dialog" style="width:80%;left:30%;right:30%;top:5%;bottom:5%; position:fixed; overflow:hidden;" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>New Task</h3>
</div>
<div class="modal-body" style="max-height:500px;" >
<p>My modal content here…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" id="startnow" onClick="createNewTask('start')" >Start
now</button>
<button type="button" class="btn btn-success"  onclick="createNewTask('')" >Save</button>
<button class="btn" data-dismiss="modal">Close</button>
</div>
</div>
<div id="addclientmodal" class="modal hide fade" tabindex="-1" role="dialog" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>New Task</h3>
</div>
<div class="modal-body" style="max-height:500px;" >
<p>My modal content here…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success"  onclick="saveNewClient()" >Save</button>
<button class="btn" data-dismiss="modal">Close</button>
</div>
</div>

ici, j'ai deux fenêtres modales ,charger le contenu dynamiquement en ajax,j'ai eu de style en ligne pour modal popup , vous pouvez également ajouter des feuilles de styles css, en se référant aux #id

0

J'ai essayé toutes les réponses données par d'autres utilisateurs. Aucun d'entre eux travaillaient pour moi.
J'ai trouvé un moyen sur mon propre, beaucoup vont dire que c'est pas une bonne méthode, mais c'est de travailler pour moi.

Je viens d'appeler une fonction javascript où je suis en train de style pour .modal
```
function changeCSS(){
setTimeout(function(){
var allModals = document.getElementsByClassName('modal');
for (var i = 0; i < allModals.length; i++) {
console.log(allModals[i]);
allModals[i].style.width="60%";
}
},1500);
}
```
Si quelqu'un trouve une meilleure façon de le faire, merci de répondre à cette question, je vais sûrement l'essayer et de vous attribuer la prime si cela fonctionne.
0

Je crois que si vous utilisez la console développeur (selon le navigateur que vous utilisez), vous trouverez directement le style ".modal" de la classe n'a pas d'incidence sur les auxiliaires modaux comme le principal style peut être trouvé dans les catégories appliquées à la modale de la sous-éléments. (e.g .modale de dialogue .modal-content). Dans votre cas, ce que vous devez faire est:
```
.modal-content{
border-radius: 0;
background-clip: border-box;
min-height: 400px;
min-width: 400px;
}
```
0

Mise À Jour 2017 - Bootstrap 4

La structure de l'modal a changé depuis Bootstrap 3, alors maintenant, autre feuille de style CSS est requise pour personnaliser la position, la taille ou modale styles. Pour modifier la modale de la largeur, de définir la max-width sur le modal-dialogpour exemple:
```
.modal.custom .modal-dialog {
max-width: 50%;
}
```
Personnalisé modal démo

Vous devez vous connecter pour publier un commentaire.