The sticky-top navbar is experiencing issues with the functionality of the Bootsrap 4 modal

I incorporated a modal into the sticky-top navbar, but for some reason, it is not functioning correctly. Surprisingly, when I remove the sticky-top class, the modal starts working as expected. Here is the code snippet that I have used:

<!DOCTYPE HTML>
    <html>
    <head>
    <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<title>Modal</title>

</head>
 <style>


 </style>
<body>

<div class="navbar sticky-top">


   <button type="button" class="btn btn-outline-light" data-toggle="modal" data-target="#exampleModalCenter">
    <img src="help.jpg">
    </button>


    <div class="modal fade" id="exampleModalCenter" 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="exampleModalCenterTitle">Customer Support</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>  
            </div>
        </div>
     </div>


</div>









 <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


</body>
</html>
htmlcssbootstrap-4navbar

Answer №1

Simply replace the position: fixed; with position: unset; in .modal-backdrop and your task is complete...

.modal-backdrop {
  position:unset !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<html><head>
<!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">



 
<title>Modal</title>
 
</head>
 
<body class="">
 
<div class="navbar sticky-top">
  
 
   <button type="button" class="btn btn-outline-light" data-toggle="modal" data-target="#exampleModalCenter">
<img src="help.jpg">
</button>


<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" style="display: none;" 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="exampleModalCenterTitle">Customer Support</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
  <span aria-hidden="true">×</span>
</button>
  </div>  
</div>
</div>
 </div>
 
 
</div>




 
 
 
 
 <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
 

</body></html>

Answer №2

Ensure the model code is placed outside the navbar to properly enable the modal functionality with backdrop.

<!DOCTYPE HTML>
    <html>
    <head>
    <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<title>Modal</title>

</head>
 <style>


 </style>
<body>

<div class="navbar sticky-top">


   <button type="button" class="btn btn-outline-light" data-toggle="modal" data-target="#exampleModalCenter">
    <img src="help.jpg">
    </button>
</div>


<div class="modal fade" id="exampleModalCenter" 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="exampleModalCenterTitle">Customer Support</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>  
          </div>
      </div>
   </div>

 <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


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

Getting rid of the standard border around images

I've been searching for a while now, but I can't seem to find a solution to fix this specific issue. On a webpage, I have an image (<img...>) that, when it loads, shows a 1px solid white (or very light grey) outline or border on the outermo ...

htmlcss

Employ Selenium WebDriver to choose a radio button by its text label

The outdated radio button implementation on a legacy page is causing some trouble. Here's the current setup: <input id="button1" name="button" value="32" onchange="assignProduct(this.value);" type="radio"></input> RADIO TEXT 1 <input i ...

htmlseleniumradio-buttonwebdriver

What is the best way to create a flawless circular image with a card in Bootstrap 5?

For my project, I incorporated Bootstrap version 5 cards. I attempted to create a perfect circle image by utilizing the Bootstrap class "rounded-circle", however, the resulting image ended up appearing oval in shape. Below is the code snippet: <img src ...

htmlcssbootstrap-5

How can I resolve the issue with the HTML/CSS footer not functioning properly on Safari for iPhone in my mobile site?

Struggling with a mobile website issue here. The client wants text-based buttons/links at the bottom, so I added them in, but my skills with size percentages are a bit rusty. I need these buttons to line up horizontally and adjust their width accordingly ...

htmliphonecssmobilefooter

Issues with Bootstrap Collapse functionality on an HTML document

Trying my hand at crafting a FAQ dropdown menu using bootstrap collapse. I've set up the collapse like this: <div class="container textcontainer accordion" id="accordionExample"> <div class="card"> <div class="card ...

jqueryhtmlbootstrap-4

CSS: Make the box width fit the text content

I'm looking to make the width of the box adjust to the text inside it Here is the HTML code snippet: <span class="box">Testing content of the box</span> And here is the CSS code snippet: .box { padding-left:5px; padding-right:5 ...

css

What is the best way to create a full bleed background image that adjusts to different screen resolutions using CSS and JavaScript?

Similar Question: Full Screen Background Image in Firefox Check out: Is there a way to achieve a similar effect on a website where the content adjusts to different monitor resolutions? On the Ingress site, it seems like everything scales proportional ...

javascriptjquerycsshtml

Using jQuery to alter the properties of CSS classes

Is it possible to modify the properties of a CSS class, rather than the element properties, using jQuery? Here's a practical scenario: I have a div with the class red .red {background: red;} I wish to change the background property of the class re ...

jquerycssajaxclassproperties

Unable to reach the nested div element within the parent div

I am facing an issue with a <div> nested inside another <div id="redBox">. I want the inner div to have display: inline-block when a user hovers over an img. Here's what I have tried: img.icnLocation:hover ~ .div_icnStamp.icnLocation { ...

css

What is the process for creating a default button in Ionic framework?

Recently, I developed an app that includes a survey page. Each question in the survey has two buttons for the user to select: Yes or No. However, as a newcomer to using Ionic, I encountered an issue after building the code and checking the output. One of ...

cssangularionic-frameworkionic4

Leverage HTML5 Data Attributes for Passing Parameters in C# .NET Stored Procedures

Can the Data attribute of an HTML5 select box be used as a parameter for a stored procedure in C# .net? Instead of relying on the SelectedValue of a DropDownList. Take a look at the following HTML5 dropdown... <select name="GlobalOrigin" id="ddlCountr ...

c#asp.nethtml

Transform jQuery timer functionality to support both minutes and seconds for redirecting, rather than just seconds

Recently, I stumbled upon a fantastic timer and redirect script based on jQuery from the talented folks over at the 'jQuery by Example' website. This script automatically redirects users after a specified number of seconds has elapsed: Here&apos ...

javascriptjqueryhtml

Decorate the elements that do not contain a specific child class

I'm currently working on an angular project with primeng for the UI components. My focus at the moment is on customizing the p-menu component, specifically the appearance of list items that are not active. The challenge I'm facing is that the act ...

cssangularprimeng

Troubleshooting a CSS problem within mat-autocomplete component in Angular 7

While using mat-autocomplete, I noticed that when I select an option from the dropdown and then scroll through the main bar, the dropdown menu does not move along with the autocomplete input field. view image here Here is the code snippet: <td width ...

cssangularjsangularmat-autocomplete

Prevent Column Breaks in Bootstrap by Setting Minimum Width

I have the following code and I am trying to create two columns with a minimum width for mobile browser support. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <div class="container"> ...

csstwitter-bootstrap

Are CSS class names the secret sauce of web design?

Imagine we have a 'Car' bean containing information about the color of a car, and we want to display the color name in that specific color along with an image of the car next to it. Currently, the bean handles the conversion of the color name to ...

cssjspenums

In JavaScript/jQuery, there is a technique for retrieving the values of dynamically generated td attributes and the id tags of elements inside them within tr

I am currently working on creating a calendar of events using PHP, jQuery, and ajax. The calendar is embedded within an HTML table, where the rows and fields are dynamically generated based on the number of days in a specific month. In order to successfull ...

javascriptphpjqueryhtmlajax

Is it possible to have images automatically resize to fit the content div without becoming distorted?

I have created a webpage that I really enjoy, but now I need to ensure it supports smaller resolutions like 1020X768. However, for those with larger monitors, I want to take advantage of the extra space by setting a minimum width that can grow with the scr ...

jqueryhtmlcss

How to add a circular edge to an element with a pseudo-element

I am trying to create an HTML element that needs to be responsive and cannot be an SVG. The element should resize when the text content inside breaks onto a new line. I have already skewed the element slightly, but now I need to add a rounded side on the r ...

htmlcsscss-transformsclip-path

Is there a way to refresh my order hook in React JS?

I've been attempting to modify the values within my order hook, but for some reason, they aren't updating. I'm relatively new to React and can't figure out what mistake I might be making. Any insights? Take a look at my code snippet: ...

javascripthtmlreactjsreact-hooks