Question

我有2个通过选择下拉菜单触发的模态。如果我首先使用“多部分删除模式”，然后使用“多部分移动”模式，则不会显示“多部分移动”模式。屏幕变黑，但不出现模态。

如果我交换它们，那么移动的一个有效，删除的一个不显示。任何人都知道我怎样才能让他们两个都能工作。

    <!-- Multi-Part Delete Modal -->
<div class="modal fade" id="multipartdeletemodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Delete Selected Parts?</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <i data-icon="ei-trash" data-size="l" class="trash"></i>
        <h5>Are you sure you want to delete these parts?<br>
            This process cannot be undone</h5>
        <form action="{% url 'multi-delete' project.id %}" method="post" id="multidelete">{% csrf_token %}</form>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button form="multidelete" type="submit" value="Submit" class="btn btn-danger">Delete</button>
      </div>
    </div>
  </div>
</div>

    <!-- Multi-Part Move Modal -->
<div class="modal fade" id="multimovemodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Move Selected Parts?</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <i data-icon="ei-trash" data-size="l" class="trash"></i>
        <h5>Please select group?</h5>
        <form action="{% url 'multi-delete' project.id %}" method="post" id="multimove">{% csrf_token %}</form>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button form="multimove" type="submit" value="Submit" class="btn btn-danger">Delete</button>
      </div>
    </div>
  </div>
</div>

Answer 1

使用此IIFE函数，您将在Bootstrap 4上获得多种可堆叠模式支持

(function multiple_modal() {
    $(document).on('show.bs.modal', '.modal', function () {
        var zIndex = 1040 + (10 * $('.modal:visible').length);
        $(this).css('z-index', zIndex);
        setTimeout(function () {
            $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
        }, 0);
    });

    $(document).on('hidden.bs.modal', '.modal', function () {
        $('.modal:visible').length && $(document.body).addClass('modal-open');
    });
})()

Answer 2

您可以通过选择第二个模式来使用CSS

.modal:nth-of-type(even) {z-index: 1052 !important;}

.modal-backdrop.show:nth-of-type(even) {z-index: 1051 !important;}

Answer 3

是的，当前在Bootstrap 4.1中无法使用堆叠模式。我所做的是使它们顺序地彼此关闭/打开。例如，当一个子（“堆叠”）模态从父模态打开时，父模态关闭，而当一个子模态关闭时，它又重新打开父（先前打开的）模态-因此，始终有一个模态打开。时间。

在子模式下，我有一个数据属性data-parent-modal="#parentExampleModal"

我的Javascript如下：

$('.modal').on('shown.bs.modal', function (e) {
    let $this = $(this),
        $parentModal = $this.parent().find($this.data('parent-modal') + '.modal');
    if ($parentModal.length) {
        $parentModal.modal('hide');
        $this.on('hidden.bs.modal', function (e) {
            $parentModal.modal('show');
        });
    }
});

如果您需要进一步的说明，请告诉我。

bootstrap4中的多个模态不起作用

3 个答案: