Question

我有两个模式，可以通过不同的点击打开。我想将内部模态的背景不透明度设置为0.9，将外部模态设置为0.3。如何添加css？

我正在使用bootstrap来显示模态。

HTML

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

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel vehicula erat. Phasellus vestibulum leo eu mi tempor blandit. Suspendisse eget iaculis lectus. Donec vitae tempus enim, quis tristique magna. Donec lobortis, sem ac pretium viverra, leo nisl consequat arcu, sit amet ullamcorper nunc turpis ac erat. In rutrum auctor ligula, quis mattis enim lacinia eu. Aliquam at magna a erat laoreet iaculis quis a justo. Donec porttitor vulputate massa, nec suscipit nisi mollis sed. In rutrum auctor ligula, quis mattis enim lacinia eu. Aliquam at magna a erat laoreet iaculis quis a justo. Donec porttitor vulputate massa, nec suscipit nisi mollis sed</p>
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
               <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal2">Open Small Modal</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->

     <!-- Modal 2 -->
  <div class="modal fade" id="myModal2" role="dialog">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header2</h4>
        </div>
        <div class="modal-body">
          <p>This is a small moda2l.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal2">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /.modal -->

css

.modal-body {
  max-height: calc(150vh - 300px);
  overflow-y: auto;
}

.modal-backdrop {
  opacity: 0.9;
}

Answer 1

如何应用这个CSS？

svn log | perl -l40pe 's/^-+/\n/'

Answer 2

您可以使用CSS中RGBa的{{1}}（红色，绿色，蓝色，alpha）值设置背景不透明度：

background-color值将颜色的不透明度设置为百分比（0.3 = 30％，0.9 = 90％）。

alpha

Answer 3

设置子模态窗口css属性background: rgba(0,0,0,.3)

.modal .modal {
  background: rgba(0,0,0,.3);
}

https://jsfiddle.net/ZcLSE/2483/

将不透明度值设置为css中的多个模态

3 个答案: