Bootstrap model is not working in my HTML file-CodePudding

I have included the CDNs (CSS/JS) provided by bootstrap in the HTML file. Then I copied the code presented on their webpage for a demo modal and pasted it in the body tag.

But when I open the page in the browser, on click of that button, the modal doesn't show. Please look at my code and tell me what's wrong.

<!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">
  <title>Document</title>
  <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</head>
<body>

  
  <!-- 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>

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

</html>

CodePudding user response：

Your button has data-toggle="modal" data-target="#exampleModal" but that is for Bootstrap 4. You are including the CSS and JS for Bootstrap 5:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

Your button should look like this:

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

Note: data-bs-toggle="modal" data-bs-target="#exampleModal".

For details see https://getbootstrap.com/docs/5.2/components/modal/#live-demo