CODEWITHSUNDEEP
csstwitter-bootstrapmodal-dialogbootstrap-modal
demoncoder
demoncoder

Reputation: 343

Specific Bootstrap Modal to change modal-backdrop colour/opacity

I have a problem which I can't edit the styling for specific modal, but only for all modal using the css below:

.modal-backdrop {background:red;}

But what can I do to change only the styling for the second modal, but not all modal?

Codepen: http://codepen.io/rae0724/pen/woQpqv

Upvotes: 0

Views: 4961

Answers (2)

Shalin Patel
Shalin Patel

Reputation: 1099

Given below solution is an patch to your requirement. and the best thing that I came up with. I have just added java script to your code. I didn't change your code a single word.

$(".modal1").on('shown.bs.modal', function() {
  $('.modal-backdrop').css('background', 'red');
});

$(".modal1").on('hidden.bs.modal', function() {
  $('.modal-backdrop').css('background', '#000');
});
.wrap {
  padding: 15px;
}
h1 {
  font-size: 28px;
}
h4,
modal-title {
  font-size: 18px;
  font-weight: bold;
}
.no-borders {
  border: 0px;
}
.body-message {
  font-size: 18px;
}
.centered {
  text-align: center;
}
.btn-primary {
  background-color: #2086c1;
  border-color: transparent;
  outline: none;
  border-radius: 8px;
  font-size: 15px;
  padding: 10px 25px;
}
.btn-primary:hover {
  background-color: #2086c1;
  border-color: transparent;
}
.btn-primary:focus {
  outline: none;
}
.model1 .modal-backdrop {
  background: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="wrap">
  <h1>Bootstrap Modal Example</h1>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".modal1">
    Modal 1
  </button>
</div>

<div class="modal fade modal1" tabindex="-1" role="dialog" aria-labelledby="modal1" aria-hidden="true">

  <div class="modal-dialog modal-lg">

    <!-- Modal Content: begins -->
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header no-borders">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="gridSystemModalLabel"></h4>
      </div>

      <!-- Modal Body -->
      <div class="modal-body">
        <p class="body-message centered"><strong>Modal 1 here.</strong>
        </p>
      </div>

    </div>
    <!-- Modal Content: ends -->

  </div>

</div>

<!---------------------->
<div class="wrap">
  <h1>Bootstrap Modal Example</h1>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".modal2">
    Modal 2
  </button>
</div>

<div class="modal fade modal2" tabindex="-1" role="dialog" aria-labelledby="modal2" aria-hidden="true">

  <div class="modal-dialog modal-lg">

    <!-- Modal Content: begins -->
    <div class="modal-content">

      <!-- Modal Body -->
      <div class="modal-body">
        <div class="body-message">
          <h4>Modal 2 here.</h4>
          <p>How to change this background colour?</p>
        </div>
      </div>

    </div>
    <!-- Modal Content: ends -->

  </div>

</div>

Upvotes: 0

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

You can use jQuery & Bootstrap's Modal Events:

  • show.bs.modal - Triggers as soon as you modal opens.
  • hidden.bs.modal - Triggers as soon as you modal is fully closed.

Using this you make a 10ms delay and change the background-color of the backdrop. Like:

// Triggers as soon as 'modal1' Opens
$('.modal1').on('show.bs.modal', function() {
  setTimeout(function() {
    $('.modal-backdrop').css('background', 'red');
  }, 10);
});

// Triggers as soon as 'modal1' is closed
$('.modal1').on('hidden.bs.modal', function() {
  $('.modal-backdrop').css('background', '');
});


// Triggers as soon as 'modal2' Opens
$('.modal2').on('show.bs.modal', function() {
  setTimeout(function() {
    $('.modal-backdrop').css('background', 'blue');
  }, 10);
});

// Triggers as soon as 'modal2' is closed
$('.modal2').on('hidden.bs.modal', function() {
  $('.modal-backdrop').css('background', '');
});

Have a look at the working snippet below:

$('.modal1').on('show.bs.modal', function() {
  setTimeout(function() {
    $('.modal-backdrop').css('background', 'red');
  }, 10);
});

$('.modal1').on('hidden.bs.modal', function() {
  $('.modal-backdrop').css('background', '');
});

$('.modal2').on('show.bs.modal', function() {
  setTimeout(function() {
    $('.modal-backdrop').css('background', 'blue');
  }, 10);
});

$('.modal2').on('hidden.bs.modal', function() {
  $('.modal-backdrop').css('background', '');
});
.wrap { padding: 15px; }
h1 { font-size: 28px; }
h4,
modal-title { font-size: 18px; font-weight: bold; }

.no-borders { border: 0px; }
.body-message { font-size: 18px; }
.centered { text-align: center; }
.btn-primary { background-color: #2086c1; border-color: transparent; outline: none; border-radius: 8px; font-size: 15px; padding: 10px 25px; }
.btn-primary:hover { background-color: #2086c1; border-color: transparent; }
.btn-primary:focus { outline: none; }
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>


<div class="wrap">
  <h1>Bootstrap Modal Example</h1>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".modal1">
    Modal 1
  </button>
</div>

<div class="modal fade modal1" tabindex="-1" role="dialog" aria-labelledby="modal1" aria-hidden="true">
  
  <div class="modal-dialog modal-lg">
    
    <!-- Modal Content: begins -->
    <div class="modal-content">
      
      <!-- Modal Header -->
      <div class="modal-header no-borders">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="gridSystemModalLabel"></h4>
      </div>
    
      <!-- Modal Body -->  
      <div class="modal-body">
        <p class="body-message centered"><strong>Modal 1 here.</strong></p>
      </div>
   
    </div>
    <!-- Modal Content: ends -->
    
  </div>
  
</div>

<!---------------------->
<div class="wrap">
  <h1>Bootstrap Modal Example</h1>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".modal2">
    Modal 2
  </button>
</div>
 
<div class="modal fade modal2" tabindex="-1" role="dialog" aria-labelledby="modal2" aria-hidden="true">
  
  <div class="modal-dialog modal-lg">
    
    <!-- Modal Content: begins -->
    <div class="modal-content">
 
      <!-- Modal Body -->  
      <div class="modal-body">
        <div class="body-message">
          <h4>Modal 2 here.</h4>
          <p>How to change this background colour?</p>
        </div>
      </div>
    
    </div>
    <!-- Modal Content: ends -->
    
  </div>
  
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

Hope this helps!

Upvotes: 2

Related Questions