CODEWITHSUNDEEP
htmlbootstrap-modal
just_another_beginner
just_another_beginner

Reputation: 159

Boostrap Modal not popping up when button is pressed

I'm trying to have a modal pop up, but when I press the button nothing happens. Here's the HTMl code so far-

<!DOCTYPE html>
<html>

<head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">
      Launch demo modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-scrollable" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalScrollableTitle">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">
            <p>
                Well, hello there!
            </p>
          </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>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>

</html>

When I open the page, a button appears on the top-left corner. Upon pressing it, it dies get highlighted, but nothing happens at all. Do you have any idea why this is happening, and how to solve it?

Upvotes: 0

Views: 93

Answers (3)

Ahmed
Ahmed

Reputation: 51

here is the problem with your html classes. look for Bootstrap 5 model

change your html with this or grab from above link

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

Upvotes: 1

Costa
Costa

Reputation: 2964

You have used bootstrap 4 code instead of bootstrap 5 code, either make all your modals the way bootstrap 5 does it, and you can read it here: https://getbootstrap.com/docs/5.0/components/modal/

or just change bootstrap versions to bootstrap 4

The difference is mostly that in bootstrap 5 you use "data-bs" + something in your attributes instead of just "data-"

Upvotes: 1

Rohit Vishwakarma
Rohit Vishwakarma

Reputation: 189

Add the following script in the head of your html code.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

Upvotes: 0

Related Questions