Aditya Ponkshe Aditya Ponkshe - 4 months ago 27
CSS Question

Is it possible to customize style of bootstrap $modal

In my application I am using bootstrap

$modal
popup two different times. content of both pop-ups is different hence size of both pop-up must be also different. I tried to style
$modal
using

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


but as expected it is changing style of both of my pop-ups. Is there any way to apply different class to each popup?

Thanks in advance.

Answer

If you have access to HTML, Then you can add an extra class to the modal like <div class="modal custom"> then you can style it like .modal.custom. Full example below

Working Demo

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*/
}

Let me know if you have further issues in the comments.