1

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

pileup
  • 1
  • 2
  • 18
  • 45

2 Answers2

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/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/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>
traynor
  • 5,490
  • 3
  • 13
  • 23
  • I inspected the element and noticed it does not have `in` class. When I use the `.modal-backdrop` selector it finds the backdrop element. When I use `.modal-backdrop.in` it returns 0 results. Also, I'm launching the modal on page load using JS if that matters: `$("#myModal").modal({ backdrop: 'static', keyboard: false});` – pileup Mar 23 '23 at 09:22
  • 1
    right, wrong BS version, try now, I've included the snippet to reproduce with jQuery – traynor Mar 23 '23 at 09:24
  • 1
    also, added modal open listener to change opacity whenever it's opened – traynor Mar 23 '23 at 09:31
  • By the way, why did you not use `css()`? Is there a reason not to use this method? – pileup Mar 23 '23 at 10:05
  • 1
    yes, see here: [How to apply !important using .css()?](https://stackoverflow.com/questions/2655925/how-to-apply-important-using-css) – traynor Mar 23 '23 at 10:10
  • Oh nice, so it was actually the exact reason not to use it in my case, because of the `!important` part. Good to know, thanks again – pileup Mar 23 '23 at 10:12
0

You have to remove !important :

document.querySelector(".modal-backdrop").style.opacity = 0.9;

or

$(".modal-backdrop").css("opacity", 0.9);
Tom
  • 4,972
  • 3
  • 10
  • 28
  • Still not working, but I think I know why: I use Laravel to push scripts at the bottom of the body. And when the modal launches, the backdrop element is below the `script` tags. Could that be the reason? – pileup Mar 23 '23 at 09:24