Could it be a z-index issue preventing my modal from appearing?

I am currently designing a mobile version of my website that resembles an app. The issue I'm facing is with the menu icon at the bottom, which is supposed to trigger a modal when clicked, but it's not working as expected. I suspect it may have something to do with the z-index. Is there a way to resolve this using only CSS? My framework is Bootstrap 4.

Here is the link to my codepen

.footer-container-mobile {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: 54px;
  background-color: #8ABE57;
  width: 100%;
  margin: 0 auto;
  padding: 10px 40px;
  box-shadow: 0px -4px 8px rgba(0, 0, 0, 0.1);
}

.footer-container-mobile i {
  color: white;
  font-size: 1.3em;
  margin-top: 5px;
}

.circle-btn-mobile {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #31353C;
  color: white;
  text-align: center;
  align-items: center;
  font-size: 2em;
  filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.30));
  display: flex;
  flex-direction: row;
}

.circle-btn-mobile-container {
  width: fit-content;
  margin: 0 auto !important;
  z-index: 50;
  position: fixed;
  bottom: 12px;
  left: 0;
  right: 0;
}
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9cfef3f3e8efe8eefdecdca8b2a9b2af">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">


<div class="container-fluid">
  <div class="row d-flex footer-container-mobile dropdown">
    <a href="#" class="mr-auto" data-toggle="modal" id="modalServiceMenuMobile"><i class="far fa-bars">Menu icon</i></a>
    <a href="#" target="_blank" class="ml-auto"><i class="fas fa-user-plus"></i>Icon</a>
  </div>

  <div class="row circle-btn-mobile-container">
    <div class="d-flex justify-content-center mx-auto circle-btn-mobile">
      <i class="far fa-plus">+</i>
    </div>
  </div>

</div>

<!-- Modal -->
<div class="modal fade" id="modalServiceMenuMobile" tabindex="-1" role="dialog" aria-labelledby="modalServiceMenuMobile" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">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>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

cssbootstrap-4

Answer №1

If you want to handle a click event, CSS/HTML won't do the trick. Instead, consider using the :hover, :focus, and :active pseudo-classes in CSS. For more options, check out various other pseudo-classes here. However, for better control over HTML elements, I recommend utilizing JavaScript. You can find an example of a JS click event here.

Answer №2

My lack of experience led me to a careless error.

It completely slipped my mind to include data-target="#idHere" in my <a href="#">. After rectifying this oversight, the problem was resolved. I appreciate the assistance even though it made me aware of my mistake.

Answer №3

Initially, there exists a situation where 2 elements share the same ID, causing an issue:

<a href="#" class="mr-auto" data-toggle="modal" id="modalServiceMenuMobile"><i class="far fa-bars">Menu icon</i></a>

<div class="modal fade" id="modalServiceMenuMobile" tabindex="-1" role="dialog" aria-labelledby="modalServiceMenuMobile" aria-hidden="true">

The necessary steps to rectify this are as follows:

  1. Assign a unique ID to the specific div that will function as your modal, separate from the link aiming to activate it.
  2. Include the data attribute 
    data-target="#[name_of_modal_id]"
    in the a element triggering the modal. Ensure the presence of the # symbol preceding the modal's distinct ID you wish to target. For instance: 
    data-target="#modalDiv"
    .

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

Customizing Typo3 Templates to Suit Your Style

Newbie alert! I'm trying to navigate typo3 templating and currently using the "bootstrap_package" (standard layout). My goal is to set up a sub-page minus the logo, menu, and footnote. Basically, I just want the content elements on a clean slate page. ...

templatesbootstrap-4typo3

Addressing the spacing and alignment issues within the progress bar

I need some help with my Angular app. I am currently working on creating a progress bar, but I am facing some issues with the alignment of the bars. Here is the code snippet that I have used: CSS: .progressbar { position: relative; height: 56px; mar ...

htmlcssangularbootstrap-5

What causes the lower gap to be smaller than expected when using "top: 50%; translateY(-50%);" on specific elements within the parent container?

My top-bar layout needs to have all elements vertically centered, but I'm experiencing issues with the top-bar_right-part not behaving as expected when using the core_vertical-align class. The left menu works fine, however. To illustrate the problem, ...

htmlcsscss-positionvertical-alignmentcss-transforms

overflow with a height of 100%

I want to add vertical scroll bars to my left and right columns without setting the height to 100%. How can I achieve this scrolling effect without specifying height: 100%? html,body{height:100%;} .row > .sidebar-fixed { position: relative; to ...

htmlcss

Is there a way to delete a stylesheet if I only have limited information about the url?

I am attempting to dynamically remove a CSS stylesheet using JavaScript or jQuery. I am aware that the target stylesheet is located within the 'head' element and includes the text 'civicrm.css', however, I do not possess the full URL o ...

javascriptjquerycss

Safari is truncating the box-shadow of an element enclosed within a button

I'm struggling with a button that has an element inside receiving a box-shadow: button { padding: 0; border: 0; margin: 0; overflow: visible; -webkit-appearance: none; background: white; } .shadow { display: inline-block; vertical- ...

csssafaribox-shadow

What is the best way to create a line break at the maximum width point?

I am currently working on a code that dynamically receives variables and concatenates them with an underscore: var text = product + "_" + someOtherInfo; After combining the variables, I need to display this text inside a div element. div { max-width ...

jquerycss

In the production mode, Nuxt styles may not be properly applied

After working on this project for about four months, everything seems fine in the development version. However, once I build the project and upload it to the server, some of my styles are not applied. For more information, I have imported styles both in c ...

cssvue.jsnuxt.jspostcsspostcss-loader

The markers on Google Maps are currently displaying in the wrong position, despite the latitude and longitude being correct

Utilizing the Google Maps API, I have implemented a system to dynamically add map markers tracking 2 of our company's vehicles. The website is developed in asp.net c# mvc with bootstrap 4.3.1. An ajax request retrieves the latest marker location from ...

javascripthtmlcssajaxgoogle-maps

Exploring the Design of Autocompletion Lists on Chrome

Today, I need to bring a problem to your attention. For the past few weeks, there has been a design issue on my website in Chrome. My autocompletion list has become a total nightmare... Previously : Current situation : I want the list to be more promine ...

cssangularjsgoogle-chromezurb-foundation

Creating a hanging indent for bullets in CSS by using em units

I am trying to create hanging indents for 'bullets' by indenting wrapped lines after the initial prefix (e.g. "1. " or "1a). " Take a look at this example of HTML: <html><body> <div style="text-indent: -3em; padding-left: 3em;"&g ...

htmlcss

Problems with CSS: Struggles with Overflow-x and display:flex

I have already completed 2 questions regarding the current issue I am facing. However, I have now created a more improved example. Please take a look below. The boxes are being loaded using Angular ng-bind. Check out the code pen here: http://codepen.io/a ...

javascripthtmlcssangularjsflexbox

Quiz Canvas: An interactive HTML game for testing your knowledge

Hello, I am currently working on developing an HTML quiz game using canvas. However, as a beginner in this field, I have struggled to find relevant documentation specifically for this project. Overview of the Game The game consists of 5 scenes, each repr ...

htmlcanvasbootstrap-4online-game

Adjusting the arrangement of div elements based on screen dimensions or orientation within an Ionic grid system

My HTML setup looks like this: <div class="row"> <div class="col-sm-12 col-md-6 col-xl-3"> </div> <div class="col-sm-12 col-md-6 col-xl-3"> </div> <div class="col-sm-12 col-md-6 col-xl-3"> </d ...

htmlcsstwitter-bootstrapionic-framework

Can you apply Bootstrap 5 custom color directly to the class attribute?

just like this: <span class="text-primary">some text</span> I'm curious if there's a way to achieve the following: <span class="text-red-300">some text</span> The red-300 color in Bootstrap 5 is a c ...

csssasscss-variablesbootstrap-5

Creating input fields using Bootstrap HTML on a single line

Struggling with Bootstrap, I can't figure out how to display the following HTML inputs in a single line: <div class="row"> <div class="col-sm-8"> <div class="form-group"> <input class="form-control" ...

jqueryhtmlcsstwitter-bootstrap

Attempting to show information upon hovering using CSS and keyframes

After creating a display that matched my boss's request for a "flat tile" look using only CSS, he suddenly changed his mind and now wants the text to slide out while keeping the image in place. You can see my progress here. I initially tried floating ...

htmlcsscss-animationsz-index

Creating a scrolling effect similar to the Nest Thermostat

After researching countless references, I am determined to achieve a scrolling effect similar to the Nest Thermostat. I came across this solution on this JSFiddle, but unfortunately, the parent element has a fixed position that cannot be utilized within my ...

javascripthtmljquerycssparallax

Display an image when the link is hovered over within a table

I'm looking for a way to display a scanned receipt image when hovering over a link within a table. I've written some code but it's not working as expected. Can anyone help me figure out what's wrong? Here is the current state of my cod ...

javascriptjqueryhtmlcss

I'm looking to have a span and an input side by side, both spanning the full width of the containing div. How can I achieve this?

In my code snippet below: <html> <body> <div style="width: 700px;"> <span>test</span> <input style="width: 100%;"></input> </div> </body> </html> I am facing an issue where the span and input el ...

htmlcss