0

I am trying to use a modal inside my full-width carousel. It's not showing properly as expected. Here is the code. '''

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

''' This is what I get. The modal pop-up is also getting the fade effect. What should I do to make the modal work like usual?

AJITH RT
  • 13
  • 1
  • That is nothing but the bootstrap effect as you want to make things more easily and rapidly you must have to pay price for that which is here in terms of customisation – ash Apr 17 '22 at 02:15
  • 1
    Why you not put modal structure outside the carousel , so you avoid redundancy, and fix overlay issue – Mohammed Metwally Apr 17 '22 at 03:20

0 Answers0