Question 45229 in Html Question posted in
Some basic documentation can be found here.

How to make modal appear above all divs – Html

I have this flex slider to show a customers previous purchases/orders, it uses a "slider" div and inside that is a foreach statement to pull the users previous purchases from a database to produce each "slide" within the slider.

In each slide there is a button to open the modal, which works fine if there is only one item there, but if there is 2-3 items then the display:flex is activated – causing the modal to pop up inside the slider div rather than on top of everything, I believe it has something to do with the position:relative for the "slider" CSS and the position for the modal CSS

and I cant move the modal outside of those divs because the modal needs to be inside the foreach statement so that it pops up with the correct item details (since they are being pulled from a database).

Also, I cant seem to replicate the issue on my PC when I narrow my browser as much as I can (guessing the window doesn’t go narrow enough for the issue to occur).

Had this issue a long time, any help is appreciated, thanks

.slider {
  width: 100%;
  padding: 6px 0px;
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.slider::-webkit-scrollbar {
  display: none;
}

.slide {
  border: 1px solid black;
  width: 140px;
  flex-shrink: 0;
  height: 100%;
}

.slider>div {
  scroll-snap-align: start;
}

.slider img {
  margin: 6px 6px;
}

.modal {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 1200 !important;
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  outline: 0;
  background-color: rgba(10, 10, 10, 0.45);
}

.modal-backdrop {
  display: none !important;
}

.modal-content {
  color: black !important;
  z-index: 1200 !important;
  position: relative;
  display: block;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: .3rem;
  outline: 0;
}

i.fa-ellipsis-v {
  border-radius: 60px;
  box-shadow: 0 0 2px #888;
  padding: 0.5em 0.6em;
  font-size: 14px;
}

i.fa-ellipsis-v:hover {
  cursor: pointer;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" id="bootstrap-css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<div class="slider">
  <div class="slide" id="slide-1">
    <img src="/images/products/<?php echo $ditt['prodimage'];?>">

    <i data-toggle="modal" data-target="#exampleModal-1"></i>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="exampleModal-1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content" style="margin-top:64px;">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Order options</h5>
        </div>
        <div class="modal-body">
          <img src="/images/products/<?php echo $ditt['prodimage']; ?>">
          <br>
        </div>
        <div class="modal-footer">
        </div>
      </div>
    </div>
  </div>
  <div class="slide" id="slide-2">
    <img src="/images/products/<?php echo $ditt['prodimage'];?>">

    <i data-toggle="modal" data-target="#exampleModal-2"></i>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="exampleModal-2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content" style="margin-top:64px;">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Order options</h5>
        </div>
        <div class="modal-body">
          <img src="/images/products/<?php echo $ditt['prodimage']; ?>">
          <br>
        </div>
        <div class="modal-footer">
        </div>
      </div>
    </div>
  </div>
  <div class="slide" id="slide-3">
    <img src="/images/products/<?php echo $ditt['prodimage'];?>">
    <i data-toggle="modal" data-target="#exampleModal-3"></i>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="exampleModal-3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content" style="margin-top:64px;">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Order options</h5>
        </div>
        <div class="modal-body">
          <img src="/images/products/<?php echo $ditt['prodimage']; ?>">
          <br>
        </div>
        <div class="modal-footer">
        </div>
      </div>
    </div>
  </div>
</div>
Tags:

3

Answers


  1. 0

    If you’re wanting the modal above all other elements in the window you can use position:fixed and z-index:99999

    .modal{
    position:fixed;top:calc(50% - 200px);left:calc(50% - 250px);width:500px;height:400px:z-index:99999;
}
    Login or Signup to reply.
  2. 0

    First of all set these attributes

    .Modal{
  position:absolute

}
.slider{
position:relative
top:0; //as default to overwrite browser defaults for non-static elements
left:0;//as default to overwrite browser defaults for non-static elements
}

    Now Your .Modal will be visible in constraints of .slider.
    Anyway if Your .Modal be visible out of the .slider

    • edit .slider{overflow} value

    or

    • YOu can set .modal{position:fixed } or YOu can put YOur .modal out of .slider :
      <div class="Modal></div><div class="slider>...</div>

    Prevent from using z-index – it’s unintuitive.
    Z-index is worth just for dynamic purpose, like programaticly switching visible images layed out in the same constraints.

    By the way
    here You can figure out Your snippet to be reproducable.

    Login or Signup to reply.
  3. 0

    Just a modal using the bootstrap classes:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" id="bootstrap-css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  </div>
  <div class="modal-body">
    ...
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>
  </div>
</div>

    Bootstrap carousel with modal

    .outer-container {
  display: flex;
  flex-direction: column;
}

.main-container {
  border: solid yellow 2px;
  padding: 1rem;
}

#carouselExampleControls {
  border: solid green 1px;
  display: flex;
  background-color: #88dd8811;
}

.modal-container {
  display: block;
  height: 8rem;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" id="bootstrap-css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<div class="outer-container">
  <div class="other-container">Other container</div>
  <div class="main-container">
    <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-indicators bg-success">
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="..." class="d-block w-100" alt="...">
          <div class="modal-container d-flex flex-row p-3 justify-content-center align-items-center">
            <div class="me-2">Happy people modal here:</div>
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary w-25 me-1" data-bs-toggle="modal" data-bs-target="#firstModal">
  Launch FIrst modal
</button>
            <!-- Modal -->
            <div class="modal fade modal-centered" id="firstModal" tabindex="-1" aria-labelledby="firstModalLabel" aria-hidden="true">
              <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="firstModalLabel">Big Dog title</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                    <span class="ms-5 p-3 text-white bg-warning">I am a big dog!</span>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                  </div>
                </div>
              </div>
            </div>
            <!-- end of first modal -->
            <div class="modal-container">
              <!-- Button trigger modal -->
              <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalTwo">
  Launch demo modal two
</button>
              <!-- Modal -->
              <div class="modal fade" id="exampleModalTwo" tabindex="-1" aria-labelledby="exampleModalTwoLabel" aria-hidden="true">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="exampleModalTwoLabel">Modal two title</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                      <span> I am a fish!</span>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <img src="..." class="d-block w-100" alt="...">
          <div class="modal-container m-3">I will hold a modal</div>
        </div>
        <div class="carousel-item">
          <img src="..." class="d-block w-100" alt="...">
          <div class="modal-container m-3">I will hold a modal</div>
        </div>
      </div>
      <button class="carousel-control-prev text-primary" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon bg-primary" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
      <button class="carousel-control-next text-success" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon  bg-primary" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
    </div>
  </div>
</div>

    Original example:

    .slider {
  width: 100%;
  padding: 6px 0px;
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.slider::-webkit-scrollbar {
  display: none;
}

.slide {
  border: 1px solid black;
  width: 140px;
  flex-shrink: 0;
  height: 100%;
}

.slider>div {
  scroll-snap-align: start;
}

.slider img {
  margin: 6px 6px;
}

.modal {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 1200 !important;
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  outline: 0;
  background-color: rgba(10, 10, 10, 0.45);
}

.modal-backdrop {
  display: none !important;
}

.modal-content {
  color: black !important;
  z-index: 1200 !important;
  position: relative;
  display: block;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: .3rem;
  outline: 0;
}

i.fa-ellipsis-v {
  border-radius: 60px;
  box-shadow: 0 0 2px #888;
  padding: 0.5em 0.6em;
  font-size: 14px;
}

i.fa-ellipsis-v:hover {
  cursor: pointer;
}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" id="bootstrap-css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Slider does not run and style seems to have no effect on it
<div class="slider">
  <div class="slide" id="slide-1">
    <img src="/images/products/<?php echo $ditt['prodimage'];?>"  alt="prodimage1">
    <i class="bi-bag-fill" style="font-size: 3rem; color: orange;" data-toggle="modal"  data-bs-toggle="modal" data-bs-target="#exampleModal-1"></i>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="exampleModal-1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content" style="margin-top:64px;">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Order options</h5>
        </div>
        <div class="modal-body">
          <img src="/images/products/<?php echo $ditt['prodimage']; ?>" alt="prodimage1">
          <br>
        </div>
        <div class="modal-footer">
        </div>
      </div>
    </div>
  </div>
  <div class="slide" id="slide-2">
    <img src="/images/products/<?php echo $ditt['prodimage'];?>" alt="prodimage2">
    <i class="bi-bag-fill" style="font-size: 3rem; color: orange;" data-bs-toggle="modal"  data-bs-target="#exampleModal-2"></i>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="exampleModal-2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content" style="margin-top:64px;">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Order options</h5>
        </div>
        <div class="modal-body">
          <img src="/images/products/<?php echo $ditt['prodimage']; ?>" alt="prodimage2">
          <br>
        </div>
        <div class="modal-footer">
        </div>
      </div>
    </div>
  </div>
  <div class="slide" id="slide-3"  data-bs-target="#exampleModal-3">
    <img src="/images/products/<?php echo $ditt['prodimage'];?>" alt="prodimage3">
    <i class="bi-bag-fill" style="font-size: 3rem; color: orange;"data-bs-toggle="modal" data-bs-target="#exampleModal-3"></i>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="exampleModal-3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content" style="margin-top:64px;">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Order options</h5>
        </div>
        <div class="modal-body">
          <img src="/images/products/<?php echo $ditt['prodimage']; ?>"  alt="prodimage3">
          <br>
        </div>
        <div class="modal-footer">
        </div>
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search