Issue arised while trying to open Bootstrap modal window due to conflict with surrounding elements

Question

Issue arised while trying to open Bootstrap modal window due to conflict with surrounding elements

I'm facing a challenge with getting the bootstrap modal window to pop up on my website. Despite trying various solutions and troubleshooting steps, I haven't been able to resolve the issue.

Even after eliminating all scripts except for the bootstrap one, as well as removing CSS files, the modal still refuses to open. I even went so far as to delete manual code related to modals that I had previously inputted before incorporating bootstrap, but nothing seems to be working.

If you'd like to take a look at my codepen where the modal window code begins, you can find it here: https://codepen.io/eylenkim/pen/KKwMPLm

Here is an excerpt from the HTML section of my code:

<!--
   -- fix other <a> tags // fix navigation
   --fix "exit" for contact pop up (mobile)
   -- center the Contact dialog box on viewport in mobile
   -->
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8"/>
      <title>Art By Eylen | Shop</title>
      <meta name="description" content="Browse Eylen's art portfolio to view work created with 35mm photography, blockprinting, and acrylic.">
      <meta name="author" content="Eylen Kim">
      <!--  data-src
         ––––––––––––––––––––––––––––––––––––––––––––––––––- -->
      <link href="subpage-stylesheet.css" rel=stylesheet type="text/css">
      <link href="StyleSheet.css" rel=stylesheet type="text/css">
      <link href="skeleton.css" rel=stylesheet type="text/css">
      <link href="otherCss/normalize.css" rel="stylesheet" type="text/css">
      <link href="otherCss/font-awesome.css" rel=stylesheet type="text/css">
      <link href="bootstrap-4.3.1-dist/css/bootstrap.css" rel=stylesheet type="text/css">
      <link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" type="text/css">
      <!-- Mobile Meta 
         ––––––––––––––––––––––––––––––––––––––––––––––––––-->
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
      <!--  Favicon
         ––––––––––––––––––––––––––––––––––––––––––––––––––-->
      <link rel="icon" type="image/png" href="photo/favicon1.png" />
   </head>

   ... (Omitted for brevity) ...

</html>

javascript html css twitter-bootstrap bootstrap-modal

Answer 1

Answer №1

Two distinct issues are currently blocking the modal from appearing.

1) Code-related Problem

Your code is encountering a 404 error with the Bootstrap library.

To confirm if this issue affects you:
- Access your browser's inspector by pressing CTRL+SHIFT+I
- You will notice:
  - ```
  Failed to load resource: the server responded with a status of 404 ()   eylenkim/fullpage/bootstrap-4.3.1-dist/css/bootstrap.css
```
- Multiple relative URLs in your code are facing similar challenges.

Solution

Replace the links to Bootstrap libraries with functional ones, for example from https://getbootstrap.com/

The following links were utilized during my testing of your code:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="307877787d786f686179506133".net</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Visit the gist for a minimal code sample showcasing a modal here: https://codepen.io/edwin-chua/pen/rNaLOEg

After addressing the link issue, you will encounter the second obstacle.

2) Stylesheet Issue

Upon resolving your code as per my instructions, an opaque overlay without a modal appears.

Eliminating the reference to

https://eylenkim.github.io/ArtByEylen/StyleSheet.css

enables the modal display, suggesting interference with the modal's CSS.

A functional pen can be found at: https://codepen.io/edwin-chua/pen/QWwEyyZ

Additional Concern

Duplicate imports of certain libraries are evident, once in the Codepen UI and again in the HTML file. This duplication may lead to debugging complexities. Ensure that each library is imported only once. Given that you are constructing a complete webpage, consolidating everything within the HTML file is recommended.

https://i.sstatic.net/y7Jkh.jpg

Additionally refer to the JS tab

As well as

https://i.sstatic.net/iG1eW.jpg

Further Suggestions

This code segment appears aimed at closing the modal. If so, it might not be necessary since Bootstrap automatically binds click events.

<!--Modal - Dialog Boxes -->
   <script type="text/javascript"> const modals = Array.from(document.querySelectorAll('.modal'));
      const triggers = Array.from(document.querySelectorAll('.trigger'));
      var closeButton = document.querySelector(".close-button"); 

      //if a trigger is clicked then...
      for (const trigger of triggers) {
        trigger.addEventListener('click', toggleModal);
      }

      // .. then toggle it's modal
      function toggleModal(event) { event.target.closest('.trigger').querySelector('.modal').classList.toggle("show-modal"); }

        // check if the clicked element is a modal, or in a modal
      function windowOnClick(event) {
        if (modals.some((modal) => modal.contains(event.target))) {
          toggleModal();
        }
      }
   </script>

Answer 2

Two distinct issues are currently blocking the modal from appearing.

1) Code-related Problem

Your code is encountering a 404 error with the Bootstrap library.

To confirm if this issue affects you:
- Access your browser's inspector by pressing CTRL+SHIFT+I
- You will notice:
  - ```
  Failed to load resource: the server responded with a status of 404 ()   eylenkim/fullpage/bootstrap-4.3.1-dist/css/bootstrap.css
```
- Multiple relative URLs in your code are facing similar challenges.

Solution

Replace the links to Bootstrap libraries with functional ones, for example from https://getbootstrap.com/

The following links were utilized during my testing of your code:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="307877787d786f686179506133".net</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Visit the gist for a minimal code sample showcasing a modal here: https://codepen.io/edwin-chua/pen/rNaLOEg

After addressing the link issue, you will encounter the second obstacle.

2) Stylesheet Issue

Upon resolving your code as per my instructions, an opaque overlay without a modal appears.

Eliminating the reference to

https://eylenkim.github.io/ArtByEylen/StyleSheet.css

enables the modal display, suggesting interference with the modal's CSS.

A functional pen can be found at: https://codepen.io/edwin-chua/pen/QWwEyyZ

Additional Concern

Duplicate imports of certain libraries are evident, once in the Codepen UI and again in the HTML file. This duplication may lead to debugging complexities. Ensure that each library is imported only once. Given that you are constructing a complete webpage, consolidating everything within the HTML file is recommended.

https://i.sstatic.net/y7Jkh.jpg

Additionally refer to the JS tab

As well as

https://i.sstatic.net/iG1eW.jpg

Further Suggestions

This code segment appears aimed at closing the modal. If so, it might not be necessary since Bootstrap automatically binds click events.

<!--Modal - Dialog Boxes -->
   <script type="text/javascript"> const modals = Array.from(document.querySelectorAll('.modal'));
      const triggers = Array.from(document.querySelectorAll('.trigger'));
      var closeButton = document.querySelector(".close-button"); 

      //if a trigger is clicked then...
      for (const trigger of triggers) {
        trigger.addEventListener('click', toggleModal);
      }

      // .. then toggle it's modal
      function toggleModal(event) { event.target.closest('.trigger').querySelector('.modal').classList.toggle("show-modal"); }

        // check if the clicked element is a modal, or in a modal
      function windowOnClick(event) {
        if (modals.some((modal) => modal.contains(event.target))) {
          toggleModal();
        }
      }
   </script>

Issue arised while trying to open Bootstrap modal window due to conflict with surrounding elements

Answer №1

1) Code-related Problem

Your code is encountering a 404 error with the Bootstrap library.

Solution

2) Stylesheet Issue

Additional Concern

Further Suggestions

Similar questions

Tips for effectively passing navigation as props in React Navigation with Expo

When trying to gather multiple parameters using @Param in a NestJS controller, the retrieved values turn out

Table with a set height containing four cells (without scroll bars) and text allocated to each cell

When selecting an input within a div, the Angular onblur function is behaving erratically

Modifying JQuery function to target two IDs instead of just one

Unable to verify the provided resource: Mailchimp

tapping on the division and sliding it to and fro

AngularJS allows for the creation of cascading dropdown selects, where the options in the second select

Implementing location functionality in Nextjs 13+ for both server-side rendering and client-side components

Issue with ReactJS not applying classes based on conditions

Having trouble configuring bcryptjs in a React.js project

What is the method for determining the new point coordinates and direction vector after a rotation of degrees in three.js?

Issues with CSS Min-Height in Various Web Browsers

Transition smoothly between two images with CSS or jQuery

Encountering a Material UI error: Incorrect hook usage when combining create-react-library with MUI

Displaying selected list item while concealing the original

Having trouble changing the icon in Google Maps during the event?

"Utilize Node.js to seamlessly stream real-time Instagram photos based on a designated hashtag

Looking to retrieve a specific portion of HTML data returned from an AJAX request

Receiving a console notification about a source map error