Search code examples
htmlcssmodal-dialogbootstrap-5bootstrap-rtl

If I add position fixed to header, modal becomes unreachable

I'm working on a personal news website and the name is News pews this is my third project and I didn't have this problem in my other project.

The project has a search btn which opens a modal in the header but when I add position: fixed; top:0; to header, modal becomes unreachable.

This is the snippet:

#search_btn {
  background-color: white;
  border-radius: 7px;
  border: none;
  width: 35px;
  height: 35px;
  justify-content: center;
  align-items: center;
  display: flex;
  transition: all 0.5s ease;
}

header {
  position: fixed;
  top: 0;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css" integrity="sha384-dpuaG1suU0eT09tx5plTaGMLBsfDLzUCCUXOY2j/LSvXYuG6Bqs43ALlhIqAJVRb" crossorigin="anonymous">
  <link rel="stylesheet" href="css/stayle.css">
  <title>Document</title>
</head>

<body>
  <header class="bg-danger w-100">
    <button type="button" class="mx-2 me-md-5 ms-md-3" data-bs-toggle="modal" data-bs-target="#search_modal" id="search_btn">جستجو</button>

    <div class="modal fade " id="search_modal">
      <div class="modal-dialog modal-dialog-centered ">
        <div class="modal-content ">
          <div class="modal-header">
            <h4 class="">برای جستجو تایپ کنید:</h4>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <div class="modal-body">
            <form class="d-flex" role="search">
              <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
          </div>

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

</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

</html>

Solution

  • The backdrop has a z-index: var(--bs-backdrop-zindex); which is evaluating to 1050 You would have to give the header a higher z-index.

    #search_btn {
  background-color: white;
  border-radius: 7px;
  border: none;
  width: 35px;
  height: 35px;
  justify-content: center;
  align-items: center;
  display: flex;
  transition: all 0.5s ease;
}

header {
  position: fixed;
  top: 0;
  z-index: 1051/* higher than variable */
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css" integrity="sha384-dpuaG1suU0eT09tx5plTaGMLBsfDLzUCCUXOY2j/LSvXYuG6Bqs43ALlhIqAJVRb" crossorigin="anonymous">
  <link rel="stylesheet" href="css/stayle.css">
  <title>Document</title>
</head>

<body>
  <header class="bg-danger w-100">
    <button type="button" class="mx-2 me-md-5 ms-md-3" data-bs-toggle="modal" data-bs-target="#search_modal" id="search_btn">جستجو</button>

    <div class="modal fade " id="search_modal">
      <div class="modal-dialog modal-dialog-centered ">
        <div class="modal-content ">
          <div class="modal-header">
            <h4 class="">برای جستجو تایپ کنید:</h4>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <div class="modal-body">
            <form class="d-flex" role="search">
              <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
          </div>

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

</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

</html>