Failure to trigger Bootstrap modal upon button activation

I am currently working on developing a basic student list webpage using bootstrap. My goal is to create a modal that pops up when the user clicks a button, allowing them to enter the required details. However, before implementing this feature, I decided to test the code provided on Bootstrap's website to ensure everything is working correctly.

Here is the code I have so far:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.css">
    <title>Student List</title>

  
</head>
<body>


    <div class="container">
        <div class="row">
            <div class="col-8" id="pageName">
                <h1>Student List</h1>
                
            </div>
            <div class="col-4" id="newButton">
                <!-- Button trigger modal -->
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                    Launch demo modal
                </button>
                
                <!-- Modal -->
                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" 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>
                

            </div>
        </div> 
    </div>
    <hr>
    <table class="table">
        <thead class="thead-dark" id="tableHeader">
            <tr>
                <th scope="col">ID</th>
                <th scope="col">Last Name</th>
                <th scope="col">First Name</th>
                <th scope="col">Course</th>
                <th scope="col">Average</th>
            </tr>
        </thead id="tableContent">
        <tbody>
            
        </tbody>
    </table>
    
    <script src="js/bootstrap.bundle.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5c3e3333282f282e3d2c1c69726d726f">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="01636e6e75727573607141342f302f32">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

</body>
</html>

Upon clicking the button, I am facing an issue where the modal does not pop up. The button itself is functional, but the modal is not appearing. I suspect that I may have missed something or failed to implement a necessary component. What could be causing this problem?

javascripthtmlcssbootstrap-modal

Answer №1

If you're using bootstrap 5, remember to replace data-toggle with data-bs-toggle and data-target with data-bs-target

  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
                    Launch demo modal
                </button>

Find more information here:https://getbootstrap.com/docs/5.1/components/modal/

Answer №2

Corrected, you actually missed the CSS file and some button attributes were incorrect:

Below is an example that should work fine...

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d0f0202191e191f0c1d2d58435d435f">[email protected]</a>/dist/css/bootstrap.min.css">
    <title>Student List</title>

</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-8" id="pageName">
                <h1>Student List</h1>

            </div>
            <div class="col-4" id="newButton">
                <!-- Button trigger modal -->
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
                    Launch demo modal
                  </button>

                <!-- Modal -->
                <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                    aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                                <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">Save changes</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <hr>
    <table class="table">
        <thead class="thead-dark" id="tableHeader">
            <tr>
                <th scope="col">ID</th>
                <th scope="col">Last Name</th>
                <th scope="col">First Name</th>
                <th scope="col">Course</th>
                <th scope="col">Average</th>
            </tr>
        </thead id="tableContent">
        <tbody>

        </tbody>
    </table>

    <script src="js/bootstrap.bundle.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="27454848535453554657671209160914">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3f5d50504b4c4b4d5e4f7f0a110e110c">[email protected]</a>/dist/js/bootstrap.min.js"
        integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
        crossorigin="anonymous"></script>

</body>

</html>

Answer №3

One way to open the modal is by utilizing jquery.

$('.openModalButton').on('click',function(){ $('#myModal').modal('show'); })

Answer №4

Check out this link without altering the bootstrap version: https://getbootstrap.com/docs/5.0/components/modal/

Upon reviewing the link, it appears that you overlooked the following snippet of code:

<script>
    var myModal = document.getElementById('myModal')
    var myInput = document.getElementById('myInput')

    myModal.addEventListener('shown.bs.modal', function () {
    myInput.focus()
})
</script>

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

Is there a specific plugin that enables dynamic calculations within a django formset?

Looking for a solution: Is there a jQuery plugin available that can perform calculations for a Django formset? The form is dynamic, changing the ID of each field per row whenever the add button is clicked. ...

javascriptjquerydjango

Guide to positioning a link on the right side of a navigation bar

I am trying to achieve a specific layout using Bootstrap. I want to align the logout button to the right-hand side and have three modules (contact us, about epm, and modules) centered on the page. Can someone guide me on how to achieve this using Bootstr ...

htmlcsstwitter-bootstrap

What is the best way to determine if a checkbox has been selected in ExtJS?

I have a panel with a checkbox inside it. I am trying to figure out how to check if the checkbox is selected or not using an external function. Can someone please assist me with this? this.currentManagerPanel = new Ext.Panel({ border: false, wid ...

javascriptextjsextjs3

Showcasing a Collection of Dropdown Options for All Angular Material Icons in Angular Versions 2 and Above

I'm currently developing an Angular 10 application that utilizes Angular Material Icons. I am in search of a method to dynamically showcase a dropdown menu containing all the available Material Icons. My attempt to programmatically retrieve the icon ...

javascripthtmlcssangularangular-material

Are you experiencing problems with JSON formatting?

Currently, I am facing an issue with populating an HTML table using JSON data. The problem arises when I try to populate the table with the JSON data that was provided to me. After careful examination, I suspect that the issue might lie in the formatting o ...

javascriptjqueryjson

Tips for evenly distributing these cards

Check out the full code on Codepen.io <div class="card-container"> <div class="card col-lg-4 col-sm-6 col-xs-12"> <div class="side">Jimmy Eat World</div> <div class="side back"><img ...

htmlcssbootstrap-4

Adjust the quantity of images shown in the Flex Slider carousel

My website includes a flex slider with a carousel, but it seems that I did not configure the properties of the slider correctly (or it could be a CSS issue) as shown here: . The last image in the carousel is only partially visible. While I am able to clic ...

jquerycssflexslider

Can debugging AngularJS in MVC be done in Visual Studio 2013 Ultimate?

Annoyance: When working on my application, I often encounter bugs that require debugging. I find myself opening Chrome, then Dev Tools, and using its less than ideal debug tools to troubleshoot the issue. Desire: It would be fantastic if I could simply se ...

javascriptjqueryangularjsdebuggingvisual-studio-2013

Reasons why text does not show color when a style element is applied

I attempted to include a color and font family within an H1 tag using style, but unfortunately it did not work as expected. The color property had no effect on my current line of text. <h1 align="center" style="font-family: Arial, Helvetica, sans-serif ...

htmlstylesfont-family

A step-by-step guide on transforming an array of objects into an array of arrays with the help of Ramda

I want to convert the following data: [ { a: 2000, b: 4000 }, { a: 8000, b: 5000 }, { a: 6000, b: 1000 } ]; Into this format: [ [ 2000, 8000, 6000 ], [ 4000, 5000, 1000 ] ]; Using Ramda library. I am able to achieve this using R.reduce functio ...

javascriptarraysjavascript-objectsramda.js

Leveraging Vuex stores in a modular WebPack setup

I am currently working on a web application where each page of the site has 2 JS files: a global "bootstrap.js" file that is consistent across every page and a custom JS file specific to each page. I've run into an issue where I want these files to sh ...

javascriptvue.jswebpackvuejs2vuex

Three.js - Troubleshooting: Imported OBJ model displaying partially transparent triangles

Currently, I am encountering an issue with an obj file that was exported from Rhino3D into obj format. In this case, half of the triangles making up a certain part of the model appear to be transparent, despite appearing fine in the 3D editor. var loader ...

javascriptthree.jstexturesrendering

I would like to mention a website without inserting a direct hyperlink, for example, in the Safari browser

Is there a way to prevent a website name from becoming a clickable link in Safari? In my marketing email, I am highlighting the websites of both my client and their competitor. When mentioning the competitor's site "sitename.com," I want to avoid cre ...

csssafarihtml-email

Struggling to extract a substring from a lengthy multi-line string in Swift

After extracting some HTML code and storing it in a string named "html", I needed to retrieve the number of stars from this HTML code. Initially, my approach was to search for the word "stars" within the html string itself. Here's the code snippet I u ...

htmlswiftxcode

The attribute 'split' is not found on the never data type

I have a function that can update a variable called `result`. If `result` is not a string, the function will stop. However, if it is a string, I then apply the `split()` method to the `result` string. This function always runs successfully without crashin ...

javascripttypescript

Navigating on a stationary object: CSS Styling

I have a main div with another nested div inside. The nested div contains cards, but I am unable to scroll through them due to the fixed positioning of the main div. I need a way to enable scrolling for the cards within the nested div. Note that the presen ...

htmlcssreactjs

Difficulty with Flexbox in Internet Explorer 11 when utilizing a Bootstrap .badge element

At the moment, I am dealing with a flex-row that contains an element that grows with the available space and a badge that should be aligned to the end without growing. However, when using flex-grow: 0 in IE11, the span.badge does not even take up the width ...

cssflexboxinternet-explorer-11bootstrap-4

What could be causing the issue with export default not functioning as expected in this straightforward code?

Whenever I try using export default in the index.js module, it gives me an error message saying: "export 'appReducers' (imported as 'appReducers') was not found in './reducers/index' (possible exports: default). However, when ...

javascriptreactjsimportmoduleexport

Alignment of React page gets messed up upon inclusion of Gallery component

I have searched for solutions online, but nothing seems to work for me. I am facing an issue with my webpage that has multiple sections, and I want to display them one after the other vertically. Here is the code snippet: import React from 'react&ap ...

htmlcssreactjs

What are some ways to design scrollbars with a Google Wave-like style?

Is there a way to design scrollbars similar to the ones found in Google Wave? They seem to save space and have an appealing look. I am interested in implementing these customized scrollbars on a div element, just like how Google Wave utilizes them. https: ...

javascripthtml