Why I can't change bootstrap modal backdrop opacity with JavaScript?

Question

I am trying to change Bootstrap backdrop opacity using JS or jQuery (Bootstrap 4.6):

// JavaScript
let modalBackdrop = document.getElementByClassName("modal-backdrop");
modalBackdrop.style.opacity = "0.9 !important";

or

// jQuery
let modalBackdrop = $(".modal-backdrop");
modalBackdrop.css("opacity", "0.9 !important");

I want to do it with JS because I have a few modals and I want to change it only for a specific modal.

When I console log the modalBackdrop data, it shows the backdrop element so it's the correct selector

Answer 1

You need to set style attribute:

Try this:

JS:

document.querySelector('.modal-backdrop').setAttribute('style', 'opacity:0.9 !important');

jQuery:

$('.modal-backdrop').attr('style', 'opacity:0.9 !important');

$(document).ready(function(e) {

  $('#mymodal').click();

  function setOpacity() {
    $('.modal-backdrop').attr('style', 'opacity:0.9 !important');
  }

  setOpacity();

  $('#myModal').on('shown.bs.modal', function() {
    setOpacity()
  })


});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>


<!-- Button trigger modal -->
<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

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