The Bootstrap 4 modal is failing to appear on the screen

My design features an image within a centered div, overlaid with a semi-opaque textbox containing an h1 element. I'm trying to implement a Bootstrap 4 modal component that pops up when the h1 is clicked. Despite following various tutorials for creating the modal, I can't seem to make it work. I'm not sure what the issue might be.

If someone could review my code and provide some guidance, I would greatly appreciate it.

You can view the CodePen here: https://codepen.io/dayna-j/pen/RMZdej?editors=0010

The HTML:

<head>
  <link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great" rel="stylesheet">
</head>
<body>

  <div class='img-div'>
    <img src="https://image.ibb.co/eZcdEn/nature_3084841_1920.jpg" alt='close up of grass'/>
    <div class='textBox-div'>      
      <h1 class = no-select data-toggle="modal" data-target="#Modal">Click Me</h1>
    </div>


      <!-- Modal (inside img-div) -->
    <div id="Modal" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
         <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
         </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
        </div>
      </div>
    </div>
  </div>
</body>

The CSS:

.no-select {
user-select: none;
}

html {


 box-sizing: border-box;
  background-color: black;
  // overflow:hidden;
}

*, *:before, *:after {
  box-sizing: inherit;
}

* { 
  margin: 0;
  padding: 0; 
}

body{
  background: #232526;
  // background: papayawhip;
  display: flex;
  justify-content: center;
  align-items: center;
  // border: 5px solid green;
  // border-radius: 1000px;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.container-fluid {
  position: relative;
  height: 100%;
  width: 100%;
}

.img-div {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  // position: relative;
  max-height: 500px;
  max-width: 850px;
  width: 100%;
  border: 1px solid grey;
  // border-radius: 1000px; 
}

.textBox-div { 
  position: absolute;
  margin: 0 auto;
  text-align: center;
  width: 100%;
  background: whitesmoke;
  opacity: .5;
}

.textBox-div h1 {
  font-family: 'Fredericka the Great', cursive;
  margin: auto 0;
  font-weight: 900;
}

@media screen and (max-width:400px)
{
  h1 {font-size: 1.5em;}
}

@media screen and (max-width:200px)
{
  h1 {font-size: 1em;}
}

The JavaScript:

$( document ).ready(function() {

  $('#Modal').modal('hide');


  $('h1').on('click', function(){
    $('#Modal').modal('show');
  });

});

Answer №1

There are a few key issues that need to be addressed in the code...

  • The inclusion of popper.js is necessary for proper functionality, however it is currently missing from the Codepen setup.
  • Having both data-toggle="modal" attribute and the Javascript code $('#Modal').modal('show') is causing conflicts, ultimately resulting in the modal not displaying as intended.
  • The utilization of // in the CSS (html{}) section is incorrect and should be replaced with a proper comment tag.

It's recommended to either use data-toggle="modal" or $('#Modal').modal('show'), but not both simultaneously.


A potential solution is to utilize bootstrap.bundle.min.js instead of separately linking to popper.min.js and bootstrap.min.css. This combined file includes all necessary functionalities.

CDN:

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js

Answer №2

Include popper.js in the head section of your website.

You can link it via CDN like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

(Source: here)

In addition, you can remove your JavaScript code for showing and hiding modals, as Bootstrap handles that functionality for you already.

Answer №3

const modalInstance = new bootstrap.Modal(document.getElementById('Modal-ID-Here'));
modalInstance.show();

This snippet demonstrates controlling a Bootstrap modal.

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

Adjust the color of the open icon (up chevron) on the Bootstrap 5 accordion button

After finding a helpful answer on Stack Overflow, I successfully changed the fill color of Bootstrap 5's down-chevron svg using CSS. Now, I am attempting to locate the URL for the up-chevron (open icon) so I can modify its fill color as well, but it i ...

The enigma of CSS: How is the width mysteriously set to 0px with no visible CSS styling

Take a look at this snapshot of a webpage I'm currently designing in Chrome Developer Tools: https://i.sstatic.net/SB00j.png The primary rule in the 'Matched CSS Rules' section indicates that the width of the element should be 160px. Howe ...

Is it advisable to incorporate Material-UI into a React project?

When it comes to designing a login page in react, I stumbled upon material-ui. The real question is, should we utilize Material-UI for this purpose? Furthermore, how can we manage styles in a separate file in the given examples? It seems logical to place t ...

Issues with the functionality of the accordion menu

I have implemented an accordion menu on my website. However, I am facing an issue where the 2nd menu always slides up when it gets loaded instead of sliding up after clicking on it. I want the behavior to change so that the sub menus elaborate only upon cl ...

How can I ensure my card div is responsive in Bootstrap?

My current section consists of only 6 cards, with 3 cards in a row of 2. When the screen size reduces (to mobile phone size), I want each card to be on its own row, displaying one by one as the user scrolls. Although it functions as desired when I resize ...

The image fails to reach full width and does not expand correctly when I zoom out

At the bottom of my website, I have a bar for displaying certain content. However, I am facing an issue where the bar is not extending to cover the entire screen width despite having code in place to do so. The HTML code is quite basic: <div class="bo ...

Ways to easily modify images using a single button with the help of jq

I am new to programming and eager to learn... Currently, I am facing the following problem: I would like to create a functionality where three images can be changed using one button and incorporating fadeIn and fadeOut animations. Essentially, all images ...

Having trouble with the toggle button on the Bootstrap 5 navbar?

I am facing an issue with my HTML code where the toggle button does not display properly when I resize the browser screen. Upon clicking on it, the navigation bar items do not show at all. Here is a screenshot of my website <html> <head> ...

Finding the Solution: Unraveling an Image String with Python

I need help decoding an image string. For example, I have a string that represents the Google logo. How can I determine the encoding used and decode it correctly? Example of google logo : (Here you will find instructions on styling properties followed by ...

Tips for Aligning Form Elements in the Middle using Bootstrap

What could be the issue? I can clearly see the container border, indicating the space available for my work. However, when I insert the row (div) and offset (div), the content gets left-justified. <div id="page" class="container" style="border:soli ...

(Monetate) Resolving the issue of delayed transition between the <a> element and CSS arrow in the breadcrumb menu utilizing HTML/CSS/jQuery

Recently, I've been working on implementing a breadcrumb-style checkout progress indicator on my website using a code generator created by an incredible developer named Jonas Ohlsson. This feature utilizes HTML, CSS, and jQuery and is integrated into ...

Tips for updating the class of a button upon clicking it

I have a dilemma with my two buttons - one is green and the other has no background. I want them to change appearance when clicked, from green to one with a dashed border-bottom style. Below is the HTML code for these buttons: <div class="btns"> ...

How can I ensure that the size of the Dropdown Menu Item matches its parent in both Bootstrap and CSS styles?

I am working on a navigation bar that has a dropdown menu which appears on hover. I want the size of the dropdown menu items to match the size of the parent element. Here is an image for reference: https://i.stack.imgur.com/oNGmZ.png Currently, the "One ...

Exploring the bond between siblings from a child's perspective

Is there a way to apply styling to the .item class when the corresponding input field is checked? <input> <span class="item"> I have discovered that I can achieve this using input:checked ~ .item {} However, my challenge lies in obtaining th ...

Adjust the order of list items based on the resolution change

Is there a way to rearrange the order of the list items in an ul when the screen resolution changes, specifically having the last li appear in the first place? Edit: I am attempting to achieve this by using flexbox. .postpreview ul { list-style: none; d ...

Troubleshooting compatibility issues between jQuery scrollLeft and Angular

As I attempt to programmatically scroll a horizontally overflowing div, I am confident that my final code should resemble the following: var $element = $('#widgetRow');//or maybe $('#widgetRow').parent(); //With 1 or more parent()& ...

Modify the CSS property of a checkbox label when the checkbox is selected

Recently, I came across some interesting HTML code: <label> <input type="checkbox" value="cb_val" name="cb_name"> my checkbox text </label> After applying CSS, I successfully added a background-color to the <label> t ...

The Bootstrap row does not display divs in a stacked formation when viewed on smaller screens

My layout is using bootstrap rows for two divs. I want them to be side by side on large devices, but stacked on small devices. However, Bootstrap is not stacking them on small devices and they are still both sitting at 50%. The specific divs I am talking ...

Achieving this result in HTML using a jQuery accordion component

Hey there, I'm looking to create a full-height accordion that extends from the bottom to the top of the page, similar to what you see on this website: . I also have a footer positioned below the accordion. The content should load when the page loads ...

`The dilemma of z-index in a dropdown menu nested within an animated card`

Having an issue that I have attempted to simplify in this StackBlitz example (the actual project is created with Angular components and Bootstrap, etc.): https://stackblitz.com/edit/angular-bootstrap-4-starter-njixcw When incorporating a dropdown within ...