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

<head>
    <meta charset="UTF-8">
    <title>Step 3 Cards</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/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) не помогает.

5
  • Какая версия bootstrap?
    – Tehnorobot
    30 авг 2021 в 16:00
  • добавьте префикс -bs- в data-атрибуты кнопки вызова модалки (data-bs-toggle, data-bs-target) 30 авг 2021 в 16:01
  • ничего не изменилось
    – RamZevss
    30 авг 2021 в 16:04
  • версия Boostrap 5.1
    – RamZevss
    30 авг 2021 в 16:04
  • 1. Вы не закрыли тег body, 2. Вы подключили Javascript?
    – Tehnorobot
    30 авг 2021 в 17:06

1 ответ 1

0

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

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

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous" />

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/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> <!-- Пропущен закрывающий тэг -->

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.