Как мне добавить определенный css для моего модального в bootstrap?

ProgramBox

Как мне добавить определенный css для моего модального в bootstrap?

Post author:admin
Запись опубликована:20 февраля, 2023
Post category:Вопросы по программированию

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

У меня есть модальная форма входа в систему, которая была создана в проекте предварительного просмотра, на html и css. Сейчас я делаю другой проект, но с bootstrap, я хочу реализовать его там. Но я не могу этого сделать.

Вот мой модальный html (внутри index.html ):

 <div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="form-container sign-up-container">
        <form action="#">
        <h1>MMT University</h1>
        <span>Se registre para começar</span>
        <input type="text" placeholder="Usuário" />
        <input type="email" placeholder="Email" />
        <input type="password" placeholder="Senha" />
        <input type="password" placeholder="Repita a sua senha" />
        <button name="submit">Registrar</button>
        </form>
        </div>
        <div class="form-container sign-in-container">
        <form action="#">
        <h1>Acessar</h1>
        
        <span>Acesse a MMT University</span>
        <input type="email" placeholder="Email" />
        <input type="password" placeholder="Senha" />
        <a href="#">Esqueceu a senha?</a>
        <button>Acessar</button>
        </form>
        </div>
        <div class="overlay-container">
        <div class="overlay">
        <div class="overlay-panel overlay-left">
          <h1>Bem vindo!</h1>
          <p>Para continuar aprendendo, acesse a sua conta!</p>
          <button class="ghost" id="signIn">Sign In</button>
        </div>
        <div class="overlay-panel overlay-right">
          <h1>MMT University!</h1>
          <p>Se registre para entrar na melhor universidade trading do mundo.</p>
          <button class="ghost" id="signUp">Registre-se</button>
        </div>
        </div>
        </div>

    </div>
  </div>
</div>

Вот это css (который я добавил рядом с css из bootstrap):

 .container {
    background-color: #fff;
    border-radius: 10px;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25),
    0 10px 10px rgba(0,0,0,0.22);
    position: relative;
    overflow: hidden;
    width: 768px;
    max-width: 100%;
    min-height: 480px;
}

.form-container {
    position: absolute;
    top: 0;
    height: 100%;
    transition: all 0.6s ease-in-out;
}

.sign-in-container {
    left: 0;
    width: 50%;
    z-index: 2;
}

.container.right-panel-active .sign-in-container {
    transform: translateX(100%);
}

.sign-up-container {
    left: 0;
    width: 50%;
    opacity: 0;
    z-index: 1;
}

.container.right-panel-active .sign-up-container {
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
    animation: show 0.6s;
}

@keyframes show {
    0%, 49.99% {
        opacity: 0;
        z-index: 1;
    }

    50%, 100% {
        opacity: 1;
        z-index: 5;
    }
}
.close {
  /* Position it in the top right corner outside of the modal */
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

/* Close button on hover */
.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)}
  to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
  from {transform: scale(0)}
  to {transform: scale(1)}
}
.overlay-container {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: transform 0.6s ease-in-out;
    z-index: 100;
}

.container.right-panel-active .overlay-container{
    transform: translateX(-100%);
}

.overlay {
    background:  #05031b;
    background: -webkit-linear-gradient(to right, #05031b, #05031b);
    background: linear-gradient(to right, #05031b, #05031b);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
    color: #FFFFFF;
    position: relative;
    left: -100%;
    height: 100%;
    width: 200%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.container.right-panel-active .overlay {
    transform: translateX(50%);
}

.overlay-panel {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    text-align: center;
    top: 0;
    height: 100%;
    width: 50%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.overlay-left {
    transform: translateX(-20%);
}

.container.right-panel-active .overlay-left {
    transform: translateX(0);
}

.overlay-right {
    right: 0;
    transform: translateX(0);
}

.container.right-panel-active .overlay-right {
    transform: translateX(20%);
}

.social-container {
    margin: 20px 0;
}

.social-container a {
    border: 1px solid #DDDDDD;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 5px;
    height: 40px;
    width: 40px;
}

Теперь этот css по какой-то причине не отображается. У кого-нибудь есть идеи??

Вот как это должно выглядеть:

И как это выглядит:

1. В вашем модальном html я не вижу никакого соответствующего css для вашего модального? Где ваша позиция модального html в html вашего сайта? Это внутри .wrapper ? Не то чтобы это имело значение, поскольку я не вижу здесь никаких стилей, которые могли бы повлиять на ваши модальные элементы.

2. Хорошо, я повторно загрузил модальный css. Я могу добавить, что всякий раз, когда я добавляю эти файлы css в свой style.css, панель навигации, раздел «Герой» и модальный раздел разбиваются.

3. Ваш скриншот и модальный код содержат 4 основных раздела содержимого, но на вашем скриншоте «как это должно выглядеть» только 2?

Ответ №1:

В вашем модальном html не было классов начальной загрузки. Обычно, если вы используете bootstrap, вы используете их классы и настраиваете их так, чтобы они работали глобально, чтобы последовательно тематизировать элементы вашего сайта.

Как упоминалось в комментариях, у вас есть 4 основных элемента макета в вашем модальном html, поэтому я скрыл последний элемент с помощью class .overlay-container , поскольку я не знаю, как вы хотите обрабатывать их визуально.

Первые 2 .form-container элемента, для которых я установил ширину 50% с помощью контейнеров flex и reset flex-direction to initial so form, соответствуют заданной ширине 50%.

Ваши модальные html .form-container -элементы для .sign-up-container и .sign-in-container были расположены в неправильном порядке, чтобы получить ваш скриншот «должен выглядеть как». Вы можете либо перестроить свой html, либо использовать css flex order для их упорядочивания. Который я использовал в демонстрации ниже.

Я также использовал .form-group класс bootstraps, обернув ваши входные данные div с помощью этого класса. И я также добавил .form-control классы bootstraps к вашим входным данным.

Смотрите CSS ниже о том, как настроить таргетинг на элементы в вашем модале и стилизовать их по своему вкусу.

 #myModal .modal-content {
  flex-direction: initial;
  overflow: hidden;
  flex-wrap: wrap;
}

#myModal .form-container {
  width: 50%;
  padding: 2rem;
  text-align: center;
  display: flex;
  align-items: center;
}

#myModal .sign-up-container {
  order: 1;
  background: black;
  color: white;
}

#myModal .sign-in-container {
  order: 0;
}

#myModal .overlay-container {
  display: none;

 <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Login Modal
</button>

<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="form-container sign-up-container">
        <form action="#" class="w-100">
          <h4 class="mb-3">MMT University</h4>
          <p>Se registre para começar</p>
          <div class="form-group">
            <input class="form-control" type="text" placeholder="Usuário" />
          </div>
          <div class="form-group">
            <input class="form-control" type="email" placeholder="Email" />
          </div>
          <div class="form-group">
            <input class="form-control" type="password" placeholder="Senha" />
          </div>
          <div class="form-group">
            <input class="form-control" type="password" placeholder="Repita a sua senha" />
          </div>
          <button class="btn btn-primary" type="submit">Registrar</button>
        </form>
      </div>

      <div class="form-container sign-in-container">
        <form action="#">
          <h4 class="mb-3">Acessar</h4>
          <p>Acesse a MMT University</p>
          <div class="form-group">
            <input class="form-control" type="email" placeholder="Email" />
          </div>
          <div class="form-group">
            <input class="form-control" type="password" placeholder="Senha" />
          </div>
          <p><a href="#">Esqueceu a senha?</a></p>
          <button class="btn btn-primary" type="submit">Acessar</button>
        </form>
      </div>

      <div class="overlay-container">
        <div class="overlay">
          <div class="overlay-panel overlay-left">
            <h1>Bem vindo!</h1>
            <p>Para continuar aprendendo, acesse a sua conta!</p>
            <button class="ghost" id="signIn">Sign In</button>
          </div>
          <div class="overlay-panel overlay-right">
            <h1>MMT University!</h1>
            <p>Se registre para entrar na melhor universidade trading do mundo.</p>
            <button class="ghost" id="signUp">Registre-se</button>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">

<!-- jQuery and JS bundle w/ Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>

Обновите свои комментарии

Я предполагаю, что вы пытаетесь эмулировать эффект модальной анимации начальной загрузки, используя css, и фактически не используя bootstrap. Если вы не используете bootstrap, вероятно, нет особого смысла импортировать его сейчас, на том этапе, на котором вы находитесь.

Ниже я привел очень грубый пример того, как вы можете использовать css transition для анимации вашего модала, добавив open класс в ваш модальный div. Без использования bootstrap. Смотрите демонстрацию ниже.

Не уверен, что это то, что вам нужно. Надеюсь, это поможет вам на правильном пути.

 // any modal button
$(document).on('click', '[data-toggle="modal"]', function(e) {
  
  // get the modal target
  let target = $(this).data('target');

  // if target has open class
  if($(target).hasClass('open')) {
  
   // remove open class
   $(target).removeClass('open');
  
  } else {
  
   // add open class
   $(target).addClass('open');
   
  }  

});

 .modal {
  width: 600px;
  position: fixed;
  opacity: 0;
  top: -50%;
  left: 50%;
  transform: translate(-50%,-50%);
  transition: all .5s ease;
}

.modal.open {
  opacity: 1;
  top: 50%;
}

#myModal .modal-content {
  flex-direction: initial;
  overflow: hidden;
  flex-wrap: wrap;
  display: flex;
}

#myModal .form-container {
  width: 50%;
  text-align: center;
  display: flex;
  align-items: center;
}

#myModal .sign-up-container {
  order: 1;
  background: black;
  color: white;
}

#myModal .sign-in-container {
  order: 0;
}

#myModal .overlay-container {
  display: none;

 <button type="button" data-toggle="modal" data-target="#myModal">
  Login Modal
</button>

<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
    
    <div class="form-container sign-in-container">
        <form action="#">
          <h4>Acessar</h4>
          <p>Acesse a MMT University</p>
          <input type="email" placeholder="Email" />
          <input type="password" placeholder="Senha" />
          <p><a href="#">Esqueceu a senha?</a></p>
          <button type="submit">Acessar</button>
        </form>
      </div>

      <div class="form-container sign-up-container">
        <form action="#" class="w-100">
          <h4>MMT University</h4>
          <p>Se registre para começar</p>
          <input type="text" placeholder="Usuário" />
          <input type="email" placeholder="Email" />
          <input type="password" placeholder="Senha" />
          <input type="password" placeholder="Repita a sua senha" />
          <br/>
          <button type="submit">Registrar</button>
        </form>
      </div>

      <div class="overlay-container">
        <div class="overlay">
          <div class="overlay-panel overlay-left">
            <h1>Bem vindo!</h1>
            <p>Para continuar aprendendo, acesse a sua conta!</p>
            <button class="ghost" id="signIn">Sign In</button>
          </div>
          <div class="overlay-panel overlay-right">
            <h1>MMT University!</h1>
            <p>Se registre para entrar na melhor universidade trading do mundo.</p>
            <button class="ghost" id="signUp">Registre-se</button>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

1. Привет, чувак. Большое вам спасибо за ваш ответ. Теперь мой модальный файл работает, и css работает правильно. Если бы вы могли просто помочь мне с одной вещью. У моего другого модала есть анимация, которую я покажу в следующем комментарии. Могу ли я просто добавить для него обычный html и css-код? (Как я добавил в другой, или это будет несовместимо из-за необходимости делать это с классами начальной загрузки?)

2. universitymmt.com/welcome.php Пожалуйста, нажмите верхнюю правую кнопку и поиграйте с этим модалом, у него есть эта анимация. Как мне изменить это на bootstrap?

3. Вы на самом деле используете bootstrap 4 на этом сайте?

4. Я использую html / css на веб-сайте, который я вам отправил. Этот веб-сайт использует только html и css (не bootstrap). Я спрашиваю, есть ли способ сделать те же анимации, но на этом, с помощью bootstrap. Добавление их в этот модал, который вы помогли мне сделать?

5. Вы имеете в виду анимацию открытия? Как в моей демонстрации? Когда я нажимаю на ваш модал, он просто мгновенно появляется и выглядит довольно красиво. Если вы не используете bootstrap, вероятно, на том этапе, на котором вы находитесь, его не так много импортируется. Я не совсем уверен, что вам нужно, вам нужен скрипт jquery для анимации вашего модального появления.