Question

我正在使用Bootstrap，并已使用它创建了一个模式。默认情况下，模态的背景（模态周围的区域）是淡化的，我可以降低其不透明度，但是模态本身的不透明度也会降低（我不想要）。请参阅下面的屏幕截图，以更清楚地了解我的意思。

我尝试过：

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-backdrop"></div> <!------ closing div here ------>
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel"></h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">

并使modal-backdrop相对定位和modal-content绝对定位：

.modal-content {
    height: 750px;
    opacity: 1;
    position: absolute;
}

.modal-backdrop {
    background-image: url("/SiteAssets/Images/45_popup_background.jpg");
    opacity: 0.5;
    position: relative;
}

但是它使.modal-backdrop完全消失了。

对此有何想法？

这是一个screenshot，它显示了模态背景，模态本身已消失。

Answer 1

您可以使用以下方式更改背景：

//topLeftPolygon = ShapeUtils.rotate(...); // do rotation when required
//Piece topLeft = new Piece(Color.YELLOW, topLeftPolygon);
Shape topLeftShape = ShapeUtils.rotate(...); // do rotation when required
Piece topLeft = new Piece(Color.YELLOW, topLeftShape);

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

调整模态背景不透明度而无需调整模态本身的背景

1 个答案: