Bootstrap modal not popping up when button is pressed-CodePudding

Im trying to make a basic student list webpage using bootstrap. What I want to do is that when the modal button is pressed, a modal pops up that lets the user type in the requested details, but before that I just copy pasted the code in bootstrap's site to test first if everything is well and implemented.

this is my code 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 >
        <div >
            <div  id="pageName">
                <h1>Student List</h1>
                
            </div>
            <div  id="newButton">
                <!-- Button trigger modal -->
                <button type="button"  data-toggle="modal" data-target="#exampleModal">
                    Launch demo modal
                </button>
                
                <!-- Modal -->
                <div  id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div  role="document">
                    <div >
                        <div >
                        <h5  id="exampleModalLabel">Modal title</h5>
                        <button type="button"  data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        </div>
                        <div >
                        ...
                        </div>
                        <div >
                        <button type="button"  data-dismiss="modal">Close</button>
                        <button type="button" >Save changes</button>
                        </div>
                    </div>
                    </div>
                </div>
                

            </div>
        </div> 
    </div>
    <hr>
    <table >
        <thead  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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

</body>
</html>

my problem is that when I press the button, nothing happens. The button in itself is fine, it can be pressed and stuff, but the modal does not pop up. Have i missed something or have not implemented something?

CodePudding user response：

You can use jquery to trigger the modal to open.

$('.newButton button').on('click',function(){ $('#exampleModal').modal('show'); })

CodePudding user response：

You are using bootstrap 5 so use data-bs-toggle instead of data-toggle and use data-bs-target instead of data-target

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

Ref:https://getbootstrap.com/docs/5.1/components/modal/

CodePudding user response：

Fixed, Actually you miss the CSS and there is button attributes were wrong:-

Below example working 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/[email protected]/dist/css/bootstrap.min.css">
    <title>Student List</title>


</head>

<body>


    <div >
        <div >
            <div  id="pageName">
                <h1>Student List</h1>

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

                <!-- Modal -->
                <div  id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                    aria-hidden="true">
                    <div >
                        <div >
                            <div >
                                <h5  id="exampleModalLabel">Modal title</h5>
                                <button type="button"  data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div >
                                ...
                            </div>
                            <div >
                                <button type="button"  data-bs-dismiss="modal">Close</button>
                                <button type="button" >Save changes</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <hr>
    <table >
        <thead  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/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
        integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
        crossorigin="anonymous"></script>

</body>

</html>