编辑模态背景

Question

我创建了一个模态，但是我想更改背景的背景颜色。

当我单击按钮时，模式打开。 背景颜色有点暗，我打算它是白色的。 我在 CSS 更改中有此更改，但它从未出现在我的设置中。

当模态打开时，我通过检查 HTML 注意到以下行

<div class="modal-backdrop fade show"> </div>

我已经尝试了很多东西，但到目前为止没有任何效果，有人可以帮助我吗？

HTML

  <div class="modal right fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <p class="heading lead">Specs
            </p>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true" class="white-text">×</span>
            </button>
          </div>
          <div class="modal-body">
          </div>
        </div>
      </div>
    </div>

CSS

    .modal.right .modal-dialog {
        position: fixed;
        margin: auto;
        width: 320px;
        height: 100%;
        -webkit-transform: translate3d(0%, 0, 0);
            -ms-transform: translate3d(0%, 0, 0);
             -o-transform: translate3d(0%, 0, 0);
                transform: translate3d(0%, 0, 0);
    }

  .modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: white !important;
}
.modal-backdrop.show {
   opacity: .5; 
}

    .modal.right .modal-content {
        height: 100%;
        overflow-y: auto;
    }

    .modal.right .modal-body {
        /* padding: 15px 15px 80px; */
      padding: 0px 0px 0px 0px;
      padding-bottom: 100%;
    }


/*Right*/
    .modal.right.fade .modal-dialog {
        right: -320px;
        -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
           -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
             -o-transition: opacity 0.3s linear, right 0.3s ease-out;
                transition: opacity 0.3s linear, right 0.3s ease-out;
    }

    .modal.right.fade.show .modal-dialog {
  right: 0px;
  top: 63px;
}

/* ----- MODAL STYLE ----- */
    .modal-content {
        border-radius: 0;
        border: none;
    }

    .modal-header {
        border-bottom-color: #EEEEEE;
    background-color: white;
    height: 55px;
    line-height: 20px;
  }

我尝试在 CSS 中添加以下类，但到目前为止我还没有成功。

.modal-backdrop和.modal-backdrop.show

Answer 1

背景的颜色由.modal-backdrop选择器上的background-color控制。 你也不需要fade show