时间戳

首页 > 解决方案 > bootstrap4 中的多个模式不起作用

html - bootstrap4 中的多个模式不起作用

问题描述

我有 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>

标签： htmltwitter-bootstrapwebbootstrap-4

解决方案

使用此 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');
    });
})()

推荐阅读