When the header is given a fixed position, the modal becomes unattainable

I am currently working on developing my personal news website called News Pews. This is my third project, and I have encountered an issue that was not present in my previous projects.

The problem arises when I apply position: fixed; top:0; to the header containing a search button that opens a modal. The modal becomes unreachable due to this styling.

Below is the snippet of code causing the issue:

#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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3d1dcdcc7c0c7c1d2c3f3869d809d80">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9dfff2f2e9eee9effceddda8b3aeb3ae">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

</html>

htmlcssmodal-dialogbootstrap-5bootstrap-rtl

Answer №1

The background is set with a 

z-index: var(--bs-backdrop-zindex);
, currently evaluated to 1050. To ensure proper layering, the header should be assigned 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fa9895958e898e889b8abacfd4c9d4c9">[email protected]</a>/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">Search</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="">Type to search:</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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="02606d6d76717670637242372c31dada6994777b36">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible for the sum to turn into NaN in Bootstrap Table JavaScript?

I used bootstrap to create a table that links with phpmyadmin. I need to show the total current amount in the table, which should update when using the search function. However, I keep getting NaN as my result. Below is the relevant code: // PART OF CODE ...

javascripthtmlmysqlbootstrap-4html-table

When a key is pressed, apply a background color and fade out effect using JavaScript

Whenever the enter key is pressed, I want to make a red color appear briefly and then fade out quickly to create a blinking effect. I attempted adding a new class on Keypress that would transition the opacity to 0: function enterpressalert(e, text) { ...

javascripthtmlcss

Is there a problem with addEventListener returning false?

What does keeping the third parameter as false in the line below signify? var el = document.getElementById("outside"); el.addEventListener("click", modifyText, false); ...

javascriptjqueryhtml

Using Jquery to generate a parent element programmatically and add multiple DOM elements inside it

Can someone help me with creating a data-driven list in jQuery? I am struggling to add multiple children to a parent element using jQuery's method for creating HTML elements. What could I be missing here? I have tried re-organizing the <a> elem ...

jqueryhtmljsonrecursion

Navigating through an array of images using ng-repeat

I am attempting to iterate through the image array and have each image correspond to a separate li. Despite using the variable "image" as my identifier, I am encountering difficulties looping through the array. The line that I am trying to modify is as fol ...

angularjshtml

Obtaining the source id using HTML5 Drag & Drop functionality

Is there a way to retrieve the id of the div I am dragging from, similar to how it is demonstrated here? Your insights are greatly appreciated. Thank you. ...

html

Having trouble converting svg to png, thinking it might be due to discrepancies in svg elements

I am facing a puzzling issue where two different SVG elements are causing my JavaScript to work in one scenario but not the other. I have replaced the SVG elements in both examples, and surprisingly, only one works while the other does not. You can view th ...

javascriptjqueryhtmlcsssvg

Enhance scrolling with a bounce effect

My goal is to implement a smooth scrolling experience with a bounce effect when the user over-scrolls, meaning they scroll too much to the top or bottom. I found an answer on Stack Overflow that explains how to achieve smooth scrolling, but I also want to ...

javascriptcss

Tap on the image placeholder to replace it with your own image

Just starting out, I have the following HTML code within a <form>: <div class="image-upload"> <img id="send_photo_img1" src="assets/images/index2.png"/> <input id="send_photo_input1" type="file"/> <img id="send_photo_img2" sr ...

jquerycss

Harnessing the power of VUE.js: Exploring the versatility of V-bind with Array and

I've encountered an issue with an app I'm currently working on. In my project, I am utilizing Vue.js to create the front-end and attempting to apply two classes to a div within a v-for loop. The first class is bound with a filter that functions ...

javascriptcssclassvue.js

Rdash Angular: How to Implement a Fixed Header Position on Page Scroll

Hi there, I am currently utilizing Rdash Angular Js. I am wondering if it's achievable to keep the header position fixed while scrolling through the page. I attempted a solution using CSS as shown below, unfortunately it didn't have the desired ...

cssangularjsheader

Shadowy figure in block form

result photo and required modifications The image on the left shows the result I obtained in a browser, while the one on the right displays the desired outcome in Figma. I am struggling with creating a semicircle with a shadow under the coin and implemen ...

htmlcssbootstrap-5

Creating tooltips using React and Tailwind CSS

I'm currently working on creating tooltips for icons in my header. I have created a component that combines the icon and tooltip into one div, with Tailwind CSS styles applied. JSX Component: const HeaderIcon = ({ icon, redirect = window.location.pat ...

cssreactjstailwind-css

What is the best way to avoid having multiple files in a JavaScript file input when a user selects a new file?

I am trying to implement a file input using vanilla JavaScript, and my goal is to restrict the user to uploading only a single file at a time. The issue I am facing is that if the user repeatedly selects a file and clicks the upload button, the file gets ...

javascripthtmlinputfile-iouser-input

performing a GET request directly from a <script> element in the index.html file

I am currently developing an application that utilizes Angular.js on the client side and Node Express on the server side. On my server side, I am using a staticAsset module. Within my index.html file, I have a lengthy list of JavaScript files that need t ...

javascripthtmlnode.jsangularjsexpress

Can I be detected for using text expanders or copying and pasting text into a form before submitting it?

As part of my job, I write messages in text boxes on a non-secure website interface for a company. Working from the comfort of my own home on my personal PC using Google Chrome, without any spy programs installed. The company prohibits pasting messages, b ...

htmlsecurityuser-interface

Variable from the submitted form does not contain the expected data

Even though I struggled to find a solution for this issue, I decided to share it here. Whenever I attempt to retrieve data from a form-submitted variable $receiptNo, it just doesn't seem to work. sales.php <input name="txtReceiptNo" type="text" i ...

phphtmlmysqlfpdf

Generating random images using Javascript

I am facing some challenges while creating my first custom JavaScript function. My goal is to display three random thumbnails on my webpage by selecting images from a pool of options. However, I am encountering issues with duplicated images and handling s ...

javascripthtmlloopsconditional-statements

Transforming the inputted URL into a clickable hyperlink

I have a text input field where any text entered is displayed below using angular.js. However, I am trying to convert any http URL entered into a clickable link. I found reference to the solution on this Stack Overflow page. Despite successfully converting ...

javascripthtmlangularjs

Divs aligned horizontally with automatic height

I am facing a dilemma with two child divs placed side by side within a parent div. The height of each div is generated based on the viewport-size, making it unknown. The issue arises in the left div where an image needs to be resized to match the height o ...

htmlcss