Пример модального окна, не загружающегося из Bootstrap

Я просто скопировал/вставил следующий код из Bootstrap, следуя руководству на YouTube, и он не появится у меня. Все, что я сделал, это скопировал/вставил с сайта (точно так же, как в видео), но я нажимаю кнопку, и ничего не происходит.

Я хочу, чтобы этот код открывал форму для заполнения пользователями.

Любая идея, что может вызвать эту проблему?

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

Полный код:

{% 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>

javascript html jquery css twitter-bootstrap

24.12.2020 19:14

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

558

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Модальные окна Bootstrap работают с JS. добавьте файл bootstrap.js, как указано в документации

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

24.12.2020 19:21

Модальные окна Bootstrap-4 используют JQuery script.

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

Вот почему мы используем приведенный ниже скрипт.

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

Если вы используете Bootstrap-4 вышеизложенное ... должно быть использовано в вашем HTML-файле.

Bootstrap-5: Однако Bootstrap-5 прекратил использование JQuery. Всего сейчас требуется всего два скрипта:

РАБОЧАЯ демонстрация в 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>

24.12.2020 19:29

Другие вопросы по теме

Почему нет двух ячеек сетки, горизонтально примыкающих друг к другу?

Создание дочернего элемента, не реагирующего на функцию onclick родительского элемента, но реагирующего на его собственное содержимое

Сплошная частичная горизонтальная линия в Markdown

Электронная почта формы начальной загрузки, диапазон и кнопка «отключены», но почему?

Прием данных HTML-формы в виде текста и отправка их в html2pdf

Фоновое изображение, добавленное в div в CSS, не отображается на локальном хосте

Модальная прокрутка начальной загрузки не работает, когда внутри нее находится навигационная вкладка

Как сделать кучу элементов недоступными с клавиатуры

Привет, как я могу исправить поле мат-формы, когда я увеличиваю экран, он теряет ширину

Изображение сначала загружается не полностью, только после обновления

Пример модального окна, не загружающегося из Bootstrap

Ответы 2

Другие вопросы по теме

Похожие вопросы