set opacity value to multiple modal in css

Question

I have two modals which opens on different clicks. I want to set background opacity of inner modal as 0.9 and outer modal as 0.3. How do I add css for the same?

fiddle

I am using bootstrap to display the modal.

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

How about applying this CSS?

.modal-backdrop.in {
  opacity: 0.9;
}

.modal-backdrop.in + .modal-backdrop.in {
  opacity: 0.3;
}

Answer 2

set the child modal window css property background: rgba(0,0,0,.3)

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

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