我无法在Bootstrap 4中的完整宽度旋转木马内使用模态。我该怎么做才能使其起作用？

Question

我试图在我的全宽旋转频率内使用模态。它的表现不正确。这是代码。 '''

<div id="carouselExampleControls" class="carousel slide customSlide slides" data-ride="carousel">
            <div class="carousel-inner">
              <div class="carousel-item active slides slidePadding">
                <p class="headline">Team</p>
                <div class="teamsSlide1">
                    <div class="gallery-image eventCard teamGroupImgContainer">
                        <img src="../static/images/Gallery/11.jpg" alt="" class="carousel-img eventCardImg teamGroupImg">
                        <button class="edit-icon insideEvent insideTeamSlide1" data-toggle="modal" data-target="#teamEdit">
                            <img src="../static/icons/edit-icon-pen.svg" class="pen">
                        </button>
                        <!-- Modal -->
                        <div class="modal" id="teamEdit" 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">Modal title</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>
                                <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Save changes</button>
                                </div>
                            </div>
                            </div>
                        </div>
                        <!-- Modal End -->
                    </div>
                    <div class="teamQuote">
                        <p class="quoteStatemenr">“Coming together is a beginning staying together is progress, working together is success”</p>
                        <p class="quoteAuthor">-Henry Ford</p>
                    </div>
                </div>
              </div>
              <div class="carousel-item slide">
                <div class="teamMembersPage1">
                    
                </div>
              </div>
              <div class="carousel-item slide">
                <img class="d-block w-100" src="..." alt="Third slide">
              </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon customArrow leftArrow" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
              <span class="carousel-control-next-icon customArrow" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
    </div>

''' 这就是我得到的。模态弹出窗口也正在获得淡出效果。我该怎么做才能像往常一样使模态起作用？ .net/gykit.png“ alt =“”>

Answer 1

将z index =“ 1000”添加到.modal-dialog

<div class="modal" >
    <div class="modal-dialog" style="z-index: 1000">
    
    </div>
</div>