How to Change Background Opacity When Bootstrap Modal Is Open

How to change background Opacity when bootstrap modal is open

I am assuming you want to set the opacity of the modal background...

Set the opacity via CSS

.modal-backdrop
{
    opacity:0.5 !important;
}

!important prevents the opacity from being overwritten - particularly from Bootstrap in this context.

how to create bootstrap modal with transparent background

As I can see Bootstrap have the class .modal-backdrop and they are setting the background color to black, you can overwrite this with this code:

.modal-backdrop {
     background-color: rgba(0,0,0,.0001) !important;
}

Bootstrap 4 Modal Opacity

Just update the current CSS class for the modal by overwriting it.

.modal-backdrop.show {
    opacity: 0.8;
}

Where .show is the class containing the opacity for your background.

Bootstrap modal with opacity appearing behind the background

The second modal is also appearing in front of the background, but it is faded to 0.7 opacity because the parent element is. If you want to achieve it unfaded, you'll need to make the parent div transparent and stick a new one in with 100% width and height, the background colour and opacity set. You'll also need to use z-orders to make sure it appears behind the modal.

Bootstrap 4 - How remove or edit opacity in modal.backdrop

As shown in this stackblitz https://stackblitz.com/edit/angular-1dh6k3

you can add

.fade.show {
  background: red; // example
  opacity: 1; // example
}

and you are able to edit the modal backdrop

bootstrap: change modal backdrop opacity only for specific modals

Little bit complicated by the fact that the backdrop is generated by the Modal plugin on the fly. One possible way of doing it is adding a class to the body when you get a show event, then remove it on the hidden.

Something like:

CSS

.modal-color-red .modal-backdrop {
  background-color: #f00;
}
.modal-color-green .modal-backdrop {
  background-color: #0f0;
}
.modal-color-blue .modal-backdrop {
  background-color: #00f;
}

JS

$('.modal[data-color]').on('show hidden', function () {
  $('body').toggleClass('modal-color-'+ $(this).data('color'));
});

HTML

<div class="modal hide fade" id="redModal" data-color="red">...</div>
<div class="modal hide fade" id="greenModal" data-color="green">...</div>
<div class="modal hide fade" id="blueModal" data-color="blue">...</div>

JSFiddle

Bootstrap Modal showing with Transparent Background

You've missed to add modal-content and wrap the modal-header and modal-body into it.. modal-content is the one which contains style background-color. Below would be your changes.

<div class="modal" id="myModal1" role="dialog" data-backdrop="static" data-keyboard="false">
  <div class="modal-content"> <!--This should be preset-->
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">×</button>
      <h3>Login to Website</h3>
    </div>
    <div class="modal-body" style="text-align:center;">
      <div class="row-fluid">
        <div class="span10 offset1">
          <div id="modalTab">
            <div class="tab-content">
              <div class="tab-pane active" id="login">
                <form method="post" action='' name="login_form">
                  <p>
                    <input type="text" class="span12" name="eid" id="email" placeholder="Email">
                  </p>
                  <p>
                    <input type="password" class="span12" name="passwd" placeholder="Password">
                  </p>
                  <p>
                    <button type="submit" class="btn btn-primary">Sign in</button>
                    <a href="#forgotpassword" data-toggle="tab">Forgot Password?</a>
                  </p>
                </form>
              </div>
              <div class="tab-pane fade" id="forgotpassword">
                <form method="post" action='' name="forgot_password">
                  <p>Hey this stuff happens, send us your email and we'll reset it for you!</p>
                  <input type="text" class="span12" name="eid" id="email" placeholder="Email">
                  <p>
                    <button type="submit" class="btn btn-primary">Submit</button>
                    <a href="#login" data-toggle="tab">Wait, I remember it now!</a>
                  </p>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

---

Related Topics