Как сделать два модальных окна на бутстрап , которые будут открывать разную информацию?

Question

Как сделать два модальных окна на бутстрап , которые будут открывать разную информацию?

Рейтинг: 1Ответов: 0Опубликовано: 14.01.2023

Сделал модальное окно авторизации на бутстрап, стилизовал его и так далее, но попробовав сделать модальное окно регистрации на том же бутстрапе, понял что они открывают одно и то же модальное окно. Что делать? Ожидал что будет два модальных окна которые открывают разную информацию, jquery знаю плохо, а в бутстрапе окна хорошие. Код кнопки авторизации:

<div class="modalnoe">


  <!-- 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 logincontent">
        <div class="modal-header loginhead">
          <h5 class="modal-title loginzagolovok" id="exampleModalLongTitle">Авторизация</h5>
          <button type="button" class="close loginclose" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
        </div>
        <div class="modal-body loginosnova">
          <div class="login2">

            <div class="forms">
              <form action="auth.php" method="POST">
                <p class="takelogin">Введите логин</p>
                <input class="name" type="login" class="form-control" name="login" id="login">
                <p class="takepassword">Введите пароль</p>
                <input class="password" type="password" class="form-control" name="password" id="password">

                <button class="voiti" type="submit">
                                                    <p>Войти в аккаунт</p>
                                                </button>
              </form>
            </div>
          </div>

        </div>

      </div>
    </div>
  </div>
  </button>
  </a>

Код кнопки регистрации:

<!-- Button trigger modal -->
<a class="reg" data-toggle="modal" data-target="#exampleModalCenter">
  <p>Регистрация</p>
</a>

<!-- 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">Регистрация</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>
  </div>
</div>
</div>

css html bootstrap

Источник: Stack Overflow на русском

Как сделать два модальных окна на бутстрап , которые будут открывать разную информацию?

Ответы