Pressing the "Contact Us" button is not causing the modal to open

The "Contact Us" button on my Bootstrap 5.2 modal is not opening the Modal.

What could I be missing?

<!DOCTYPE html>
<html lang="html" xmlns="http://www.w3.org/1999/html">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>UNIFINITY Worldwide</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
</head>
<body>
  <div class="container border">

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
      Launch static backdrop modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="staticBackdropLabel">Modal title</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Understood</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

I have copied the code from the Bootstrap website but cannot figure out why it's not working. I am using PyCharm with Python and Flask Framework. Additionally, I've heard about needing an appropriate Popper for Bootstrap 5, how can I implement that?

EDIT: I attempted to add the popper using these two lines of code, but it's still not working...

<script src="https://cdn.jsdelivr.net/npm/@popperjs/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.js">
javascripthtmlcssbootstrap-5

Answer №1

Your code snippet was missing the bootstrap JS file, so I added it in and now everything is working smoothly. You have the option to include bootstrap.bundle.min.js, which combines both bootstrap.min.js and popper.min.js into a single file for convenience.

I suggest checking out the introductory section of the documentation for more information on these fundamental concepts: https://getbootstrap.com/docs/5.3/getting-started/introduction/

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="690b06061d1a1d1b0819295c475b47dbceee7eae6eb93">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer"/>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dab8b5b5aea9aea8bba49ebaacbfffebafbdb3beafcdecfcfbcb7bd32befdcfe1">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

<div class="container border">

  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
    Launch static backdrop modal
  </button>

  <!-- Modal -->
  <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="staticBackdropLabel">Modal title</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Understood</button>
        </div>
      </div>
    </div>
  </div>

</div>

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

What is the best way to display a welcoming message only once upon visiting the home page?

After gaining experience working with rails applications for a few months, I have been tasked with adding a feature that displays a welcome message to users visiting the site home page for the first time, but not on subsequent visits or page reloads. What ...

javascriptjqueryruby-on-rails

Guide to resolving the issue of "Links lacking a clear name" in Lighthouse

Lighthouse is recommending that I address my a href text Here is the HTML code snippet in question: <a href="https://twitter.com/@some-name-here" target="_blank" rel="noopener" class="social-icon twitter grayscale"></a> The issue is that I a ...

htmlcsslighthouse

Template for Vue.js Component Registration

Below is a simple Vue component example: const MyComponent = Vue.component('my-component', { data () { // data here... }, methods: { // methods here... }, template: '<p>Hello, world !!!</p>' }); I ...

javascriptvue.jsvue-component

Alternative image loading in a figure element

I'm currently in the process of putting together an image gallery using Angular 4.3.0, where images are displayed as background images within figure elements rather than img tags. The images are initially resized to smaller dimensions before being use ...

javascripthtmlcssangularimage

Angular: Verify that all services are fully executed before proceeding to the next step

We have adopted Angular for our project. Our component receives data from an API, which is then processed by Data Services. These services transform the data by combining first and last names, rounding dollar amounts, performing calculations, etc. The fina ...

javascriptangulartypescriptangular8

Angular2 bootstrapping of multiple components

My query pertains to the following issue raised on Stack Overflow: Error when bootstrapping multiple angular2 modules In my index.html, I have included the code snippet below: <app-header>Loading header...</app-header> <app-root>L ...

javascriptangulartypescript

Storing a Promise in a Variable in React

As a newcomer to JavaScript/React, I am finding it challenging to grasp the concept of using Promise and async. To illustrate, consider the API call getSimById in a JS file that returns a Promise: export function getSimById(simId) { return fetch(simsUrl ...

javascriptjsonreactjspromiseoptional-chaining

Bringing custom JavaScript functions into a Vue.js component

In my Vue.js project, I have an abundance of Javascript processing that is all local and doesn't require server-side functionality. I'm exploring the possibility of importing a file containing specific processing functions (such as mathematical a ...

javascriptvue.jsvue-component

Creating an element in react-draggable with two sides bound and two sides open - here's how!

At the moment, I am facing an issue where the element is restricted from moving outside of the container with the class of card-width-height. My goal is to have the right and bottom sides bounded within the container while allowing the element to move beyo ...

javascriptcssreactjsecmascript-6jsx

Tips for turning off specific row elements within a formGroup in Angular

Hey there, I'm looking to disable a specific row that is selected through a checkbox. I've tried the code below but it's not working, so I could use some help with it. Thanks in advance! HTML file code: <form [formGroup]="myFormGroup"& ...

htmlangularangular6angular7

The jQuery slider's next button is not functioning as intended

jQuery('#slider-container').bjqs({ 'animation' : 'slide', 'width' : 1060, 'height' : 500, 'showControls' : false, 'centerMarkers' : false, animationDuration: 500, rotationS ...

javascriptjquery

Specific solution in responsive design queries

Looking to modify the style of a div based on screen resolution. Here is an example: @media only (width: 320px){do something} I attempted using this code but it was not successful. Appreciate any assistance! ...

csswebresponsive-designmedia-queries

The error function is consistently triggered when making an Ajax POST request, even though using cURL to access the same

I have been using Ajax's POST method to retrieve a JSON response from the server. However, whenever I click the button on my HTML page, the Ajax function always triggers the error function, displaying an alert with the message "error." Below is the co ...

javascriptjqueryjsonajaxcurl

What process allows for this Twitter API response to be converted into HTML format automatically?

It is common knowledge that Twitter operates in an API-centric manner, meaning all Twitter apps retrieve their data through the API. Upon accessing (or .xml for those who prefer), a JSON formatted result with plaintext content and no additional formattin ...

htmlxmljsonapitwitter

Embed the component into the array collection

I have an array and I want to display a random component inside it. Specifically, I want to include the FeedbackComponent before the last two objects in the array. This is how it should look like in a schematic representation: storyObject storyObject st ...

javascriptvue.jsvue-componentvue-render-function

Dealing with Uncaught Type Errors in the Fixed Data Table

I am attempting to implement a fixed data table using the following code snippet. var MyCompi = React.createClass({ getInitialState: function() { return { rows : [ {"id":1,"first_name":"William","last_name":"Elliott","email":"<a ...

javascriptreactjs

Adjust the color of text as you scroll

Could you provide guidance on changing the color of fixed texts in specific sections of my portfolio website? Unfortunately, I can't share my lengthy code here, but would greatly appreciate it if you could illustrate with examples. Here's a refer ...

javascripthtmlcss

What is the best way to remove this H1 tag?

I am currently working on restructuring the HTML layout of my long-standing Wordpress website in order to make it more intuitive. However, I am faced with a challenge when it comes to understanding how the original designer set it up years ago. It seems th ...

htmlcsswordpress

"Encountering a glitch with the Expo app while trying to set

Whenever I try to run the following code snippet, I encounter an error: const Stack = createStackNavigator(); I have made sure that all the necessary dependencies are installed, but still, I get the following error message: "undefined is not an object (e ...

javascriptreact-nativeexpo

Leveraging the FileReader API within a Vue.js component function

I'm working on a Vue.js file picker that needs to display previews of selected files. To accomplish this, I am utilizing the FileReader API to read user-selected files as data URLs using the readAsDataURL method of the FileReader object. However, I&a ...

javascripteventsvue.jsfilereader