Модальное окно не отображается при нажатии на кнопку

Question

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Step 3 Cards</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous" />
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light bg-light shadow-lg p-3 mb-5 bg-body rounded">
            <div class=" container-fluid">
                <a class="navbar-brand" href="#">Step 3 Clinic</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    </ul>
                    <form class="d-flex">
                        <button id="login-btn" class="btn btn-outline-success" type="submit" data-toggle="modal"
                            data-target="#loginModal">Log in</button>
                        <button class="btn btn-outline-success" type="submit">Create Visit</button>
                    </form>
                </div>
            </div>
        </nav>
        </section>

        <!-- Модалка для Log in-->
        <div class="modal fade" role="dialog" id="loginModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal title">Log in Form</h3>
                        <button class="close" type="button" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <input type="email" name="email" class="form-control" placeholder="Email">
                        </div>
                        <div class="form-group">
                            <input type="password" name="password" class="form-control" placeholder="Password">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-sucess">Sign in</button>
                    </div>
                </div>
            </div>
        </div>

UPD:

версия Boostrap 5.1

Префикс -bs- в data-атрибутах кнопки вызова модалки (data-bs-toggle, data-bs-target) не помогает.

Answer 1

Вы зачем кнопку модального окна в форму вставили? Ну и документацию читать не пробовали?

<button class="btn btn-outline-success" type="button" data-bs-toggle="modal" data-bs-target="#loginModal">Модальное окно</button>

<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://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light shadow-lg p-3 mb-5 bg-body rounded">
    <div class=" container-fluid">
      <a class="navbar-brand" href="#">Step 3 Clinic</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        </ul>
        <button class="btn btn-outline-success" type="button" data-bs-toggle="modal" data-bs-target="#loginModal">Модальное окно</button>
        <form class="d-flex">
          <button id="login-btn" class="btn btn-outline-success" type="submit" data-toggle="modal" data-target="#loginModal">Log in</button>
          <button class="btn btn-outline-success" type="submit">Create Visit</button>
        </form>
      </div>
    </div>
  </nav>
  <!-- </section> Это откуда? -->


  <!-- Модалка для Log in-->
  <div class="modal" role="dialog" id="loginModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Log In</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <input type="email" name="email" class="form-control" placeholder="Email">
          </div>
          <div class="form-group">
            <input type="password" name="password" class="form-control" placeholder="Password">
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-sucess">Sign in</button>
        </div>
      </div>
    </div>
  </div>

</div> <!-- Пропущен закрывающий тэг -->

БЛОГ НА HUSL

Модальное окно не отображается при нажатии на кнопку

Ответы (1 шт):