CODEWITHSUNDEEP
javascripthtmljquerycsstwitter-bootstrap
RCarmody
RCarmody

Reputation: 720

Example Modal Not Loading from Bootstrap

I just copy/pasted the following code from Bootstrap while following a YouTube tutorial and it will not pop-up for me. All I did was copy/paste from the site (exactly as it is within the video) but I click the button and nothing happens.

I'd like for this code to pop-up the form for users to fill out.

Any idea what would be causing this issue?

<!-- Button trigger modal Source: https://getbootstrap.com/docs/4.0/components/modal/ -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">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>

Full Code:

{% load static %}
<html>
<head>
    <title>Polling</title>
    <link href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

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

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">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 class="container">
    <div class="jumbotron">
    <div class="card">
      <div class="card-header">
        Featured Item(s)
      </div>
      <div class="card-body">
        <h1 style="font-family: Graphik Black; font-size: 20px">Apple iPhone XS (AT&T)</h1>
        <p class="card-text">This is a description.</p>
        <div class="row">
            <div class="col-md-12">
                <button type="button" class="btn btn-success badge-pill float-right" style="font-size: 12px; width:55px">+ New</button>
            </div>
        </div> 
        <br>
        <table class="table table-hover">
  <thead>
    <tr style="font-family: Graphik Black; font-size: 14px">
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
    </tr>
  </thead>
  <tbody>
    <tr style="font-family: Graphik; font-size: 12px">
      <th scope="row" class="container">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td><button type="button" class="btn btn-danger btn-sm badge-pill" style="font-size: 11px; width:60px">Remove</button></td>
    </tr>
    <tr style="font-family: Graphik; font-size: 12px"> 
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td><button type="button" class="btn btn-danger btn-sm badge-pill" style="font-size: 11px; width:60px">Remove</button></td>
    </tr>
    <tr style="font-family: Graphik; font-size: 12px">
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td><button type="button" class="btn btn-danger btn-sm badge-pill" style="font-size: 11px; width:60px">Remove</button></td>
    </tr>
  </tbody>
</table>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
    </div>
</div>
</body>
</html>

Upvotes: 2

Views: 881

Answers (2)

solution
solution

Reputation: 24

Bootstrap modals work with JS. add the bootstrap.js file as stated in the documentation

<head>
   [...]
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>

Upvotes: 1

Imran Rafiq Rather
Imran Rafiq Rather

Reputation: 8098

Bootstrap-4 Modals make use of JQuery script.

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

That's why we use the below script.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

If you are using Bootstrap-4 the above ... has to be used in your HTML file.

Bootstrap-5: Bootstrap-5 has however stopped the use of JQuery. And only two scripts are overall required now:

WORKING Demo in Booststrap-5:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
      crossorigin="anonymous"
    />

    <title>Modal</title>
  </head>
  <body>
    <!-- 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>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
      crossorigin="anonymous"
    ></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Upvotes: 0

Related Questions