Bootstrap 具有背景的多个模态框

Question

我有两个模式：一个打开约会信息，包括删除按钮，另一个是删除前的警告。我希望删除警告模态在下面的模态上方放置一个背景，将其变灰，但是两个模型总是在背景之上。

我似乎无法访问具有背景 class 的 div，因此无法为 delete-modal 的背景提供不同的 class 来区分在两个背景之间。还有什么我可以做的吗？

删除模式：

<div class="modal fade delete-modal" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title" id="deleteModalLabel">Achtung!</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body" id="deleteModalBody">
    
  </div>
  <div class="modal-footer">
    <button type="button" id="deleteButton" class="btn btn-danger">Eintrag löschen</button>
    <button type="button" id="cancelButton" class="btn btn-secondary" data-dismiss="modal" aria-label="Close">Abbrechen</button>
    <button type="button" id="okButton" class="btn btn-primary" data-dismiss="modal" aria-label="Close">OK</button>
  </div>
</div>

信息模式：

{# Modal #}
<div class="modal fade" id="terminModal" tabindex="-1" role="dialog" aria-labelledby="terminModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title" id="terminModalLabel">Lorem</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
    <div class="modal-body">

    <div class="row pad-bottom">
        <div class="col-sm">
        
        {# Datum #}
        
            <label for="datum" class="label-lg">Datum</label><br>
            <input class="form-control-plaintext" readonly type="text" id="datum" name="datum" value="01.01.1970">
            
            
        </div>
        <div class="col-md align-self-end">
        
        {# Tageszeit#}
        
            <input class="form-control-plaintext" readonly type="text" name="tageszeit" id="tageszeit" value="dolor">
            
            
        </div>
    </div>
    <div class="row pad-bottom">
        <div class="col-lg">
        
        {# Intervall #}

            <label for="intervall" class="label-lg">Intervall</label><br>
            <input type="text" readonly class="form-control-plaintext" id="intervall" name="intervall" value="sit">
            
        </div>
    </div>

    <div class="row pad-bottom">
        <div class="col-lg">
        
        {# Azubi-Liste #}
        
            <div class="card">
                <div class="card-header align-middle">
                    Teilnehmer
                </div>
                <div class="card-body overflow-auto">
                    <div id="azubis" class="container-fluid">

                    </div>              
                </div>
            </div>
        
        </div>
    </div>

</div>
<form method="post" action="{{ route("termin/edit") }}" id="submitForm">
    <div class="modal-footer">
        <button id="einzelTerminSelect" name="einzelTerminSelect" type="submit" class="btn btn-primary">Bearbeiten</button>
        <button id="gruppenTerminSelect" name="gruppenTerminSelect" type="submit" class="btn btn-primary">Bearbeiten für alle Teilnehmer</button>
        <input type="button" value="löschen" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal" onclick="confirmDelete('submitForm')">

        <input type="hidden" id="kalenderDel" name="kalenderDel">
    </div>
</form>
</div>

Answer 1

我可以使用 nth-of-type() 在我的 CSS 中访问特定背景。因此，我将 delete-modal 背景的 z-index 设置得比通常的 modal 高一点，并将 delete-modal 的 z-index 设置得更高。

.delete-modal {
    z-index: 1060;
}
.modal-backdrop:nth-of-type(3) { 
    z-index: 1050;
}

Bootstrap 具有背景的多个模态框

Bootstrap multiple Modals with Backdrop over one

html

css

bootstrap-modal

bootstrap-4