如何在Bootstrap 3的下拉列表中显示模态？

Question

我正在创建一个下拉列表菜单，单击锚点后，我需要在其中显示模式，但由于某种原因，屏幕会淡出而没有显示模式。

我想找到一种可以通过任何方式解决此问题的方法，因此，只要模式位于ul元素内，就可以使用CSS和JavaScript

到目前为止，我看到的唯一使之起作用的解决方案是将modal移到ul元素之外，但是存在问题的地方……对于一些后端操作，我需要在ul元素内使用它。

<ul class="dropdown-menu image-options-menu" aria-labelledby="dropdownMenu1">
  <!-- Report Status -->
  <li>
    <a href="#!" data-toggle="modal" data-target=".reportStatus-20" type="button"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Report status</a>
  </li>
  <!-- Section: Modal -->
  <div class="modal fade in reportStatus-20" id="userModal" aria-hidden="false">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title">Some title</h4>
        </div>
        <div class="modal-body">
          <p>Some content</p>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div>
</ul>

我应该能够看到模态，但是到目前为止，它只能使屏幕变暗