Skip to main content
Bumped by Community user
adicionou 12551 caracteres ao conteúdo
Fonte Link

.carousel-item {
    height: 100vh;
    min-height: 300px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  .grow:hover
  {
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
  }
  .modal.show .modal-dialog {
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
  @media (min-width: 576px)
  .modal-dialogs {
    max-width: 500px;
    margin: 1.75rem auto;
  }
  .modal-dialogys {
    position: relative;
    width: auto;
    margin: .5rem;
    pointer-events: none;
  }
  @media screen and (min-width: 768px)
  .modal-dialogs {
    right: auto;
    width: 600px;
    padding-top: 30px;
    padding-bottom: 30px;
    max-width: 500px;
  }

  .modal-dialogs {
    z-index: 1050;
    width: auto;
    padding: 10px;
    margin-right: auto;
    margin-left: auto;
    max-width: 500px;
  }
  @media (min-width: 576px)
  .modal-dialog-centeredh {
    min-height: calc(100% - (1.75rem * 2));
  }
  .modal-dialog-centeredh {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    min-height: calc(100% - (.5rem * 2));
  }
  input[type=numberl]::-webkit-inner-spin-button { 
    -webkit-appearance: none;
    cursor:pointer;
    display:block;
    width:8px;
    color: #333;
    text-align:center;
    position:relative;
  }
  input[type=numberl] { 
   -moz-appearance: textfield;
   appearance: textfield;
   margin: 0; 
 }
<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>
<body>
  <!-- Page Content -->
  <section class="py-5">
    <div class="container">
      <div class="row justify-content-sm-center">
        <div class="row">
          <div class="card" style="width: 18rem;">
            <img class="card-img-top" src="https://constru360.com.br/wp-content/uploads/2016/04/imoveis-mercado-imobiliario.jpg" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Imóveis</h5>
              <p class="card-text">Propriedade Rurais, Apartamentos, Casas </p>
            </div>
            <ul class="list-group list-group-flush">
              <li class="list-group-item text-center"><a href="telanuncio.php" class="card-link">Ver Anuncios</a></li>
            </ul>
            <div class="card-body text-center">
              <button class="btn btn-secondary btn-lg" data-toggle="modal" data-target="#exampleModal">Faça o seu Anuncio</button>
            </div>
          </div>

          &nbsp&nbsp&nbsp  

          <div class="card" style="width: 18rem;">
            <img class="card-img-top" src="imgs/img-cr.jpg" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Automóveis</h5>
              <p class="card-text">Carros, Caminhões, Caminhonetes, Motos, Etc</p>
            </div>
            <ul class="list-group list-group-flush">
              <li class="list-group-item text-center"><a href="telanuncio.php" class="card-link">Ver Anuncios</a></li>
            </ul>
            <div class="card-body text-center">
             <button class="btn btn-secondary btn-lg" data-toggle="modal" data-target="#exampleModal">Faça o seu Anuncio</button>
           </div>
         </div>

         &nbsp&nbsp&nbsp

         <div class="card" style="width: 18rem;">
           <img class="card-img-top" src="imgs/img-gd.jpg" alt="Card image cap">
           <div class="card-body">
            <h5 class="card-title">Bovinos</h5>
            <p class="card-text">Novilhas, Novilhos, Terneiras, Terneiros, Vaca com Cria, Etc</p>
          </div>
          <ul class="list-group list-group-flush">
            <li class="list-group-item text-center"><a href="telanuncio.php" class="card-link">Ver Anuncios</a></li>
          </ul>
          <div class="card-body text-center">
           <button class="btn btn-secondary btn-lg" data-toggle="modal" data-target="#exampleModal">Faça o seu Anuncio</button>
         </div>
       </div>

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

  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Teste</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="false">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <center>
            <h3 class="font-weight-bold">Você já é Cadastrado?</h3>
          </center>
        </div>
        <div class="modal-footer">
          <button class="btn btn-primary" data-toggle="modal" data-target="#exampleModal4" data-dismiss="modal">Sim</button>
          <button class="btn btn-secundary" data-toggle="modal" data-target="#exampleModal6" data-dismiss="modal">Não</button>
        </div>
      </div>
    </div>
  </div>


  <!-- Modal -->
  <div class="modal fade" id="exampleModal4" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel4" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Login</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <!-- Tab panes -->
          <form class="form-horizontal"  action="" method="POST">
            <div class="form-group">
              <label class="col-sm-2 control-label">Usuário</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="usuario" placeholder="Usuário">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">Senha</label>
              <div class="col-sm-10">
                <input type="password" class="form-control" id="senha" placeholder="Senha">
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
          <button type="submit" class="btn btn-success"  data-toggle="modal" data-target="#exampleModal1" data-dismiss="modal">Entrar</button>
        </div>
      </div>
    </div>
  </div>


<div class="modal fade" id="exampleModal6" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel6" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Cadastre-se primeiro!</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 class="form-group top">
          <form class="form-horizontal">
            <div class="form-group">
              <label class=" control-label" for="nome">Nome:</label>  
              <div class="">
                <input id="nome" name="nome" type="text" placeholder="Nome Completo" class="form-control input-md" required="">
              </div>
            </div>
            <div class="form-group">
              <label class=" control-label" for="Nome">Nascimento</label>  
              <div class="">
                <input id="dtnasc" name="dtnasc" placeholder="DD/MM/AAAA" class="form-control input-md" required="" type="date" maxlength="10" OnKeyPress="formatar('##/##/####', this)" onBlur="showhide()">
              </div>
            </div>

            <div class="form-group">
              <label class=" control-label" for="cpf">CPF:</label>  
              <div class="">
                <input id="cpf" name="cpf" type="number" placeholder="CPF" class="form-control input-md">

              </div>
            </div>
            <div class="form-group">
              <label class=" control-label" for="end">Endereço:</label>  
              <div class="">
               <input id="end" name="end" type="text" placeholder="Rua/Avenida e Número" class="form-control input-md" required="">
             </div>
           </div>

           <div class="form-group">
            <label class="control-label" for="sexo">Sexo:</label>
            <div class="">
              <select id="sexo" name="sexo" class="form-control">
                <option value="Não informado">Não informado</option>
                <option value="Masculino">Masculino</option>
                <option value="Feminino">Feminino</option>
              </select>
            </div>
          </div>

          <div class="form-group">
            <label class=" control-label" for="telefone">Telefone:</label>  
            <div class="">
              <input id="telefone" name="telefone" type="tel" placeholder="Telefone" class="form-control input-md" required="">

            </div>
          </div>

          <div class="form-group">
            <label class=" control-label" for="email">E-mail:</label>  
            <div class="">
              <input id="email" name="email" type="text" placeholder="E-mail" class="form-control input-md" required="">
            </div>
          </div>
        </form>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
      <button type="submit" class="btn btn-primary" >Proximo</button>
    </div>
  </div>
</div>
</div>


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>

Se eu clico no botão 1 mostraFazer Anuncio e depois no modal da pergunta em clico em sim eu serei direcionado para o modal 1 apos 2 outros modaisde login eu clico em entrar deveria mostrar o modal do anuncio em que já tenho e assim para cada botãoo usuario clicou no card.

Se eu clico no botão 1 mostra o modal 1 apos 2 outros modais que já tenho e assim para cada botão.

.carousel-item {
    height: 100vh;
    min-height: 300px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  .grow:hover
  {
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
  }
  .modal.show .modal-dialog {
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
  @media (min-width: 576px)
  .modal-dialogs {
    max-width: 500px;
    margin: 1.75rem auto;
  }
  .modal-dialogys {
    position: relative;
    width: auto;
    margin: .5rem;
    pointer-events: none;
  }
  @media screen and (min-width: 768px)
  .modal-dialogs {
    right: auto;
    width: 600px;
    padding-top: 30px;
    padding-bottom: 30px;
    max-width: 500px;
  }

  .modal-dialogs {
    z-index: 1050;
    width: auto;
    padding: 10px;
    margin-right: auto;
    margin-left: auto;
    max-width: 500px;
  }
  @media (min-width: 576px)
  .modal-dialog-centeredh {
    min-height: calc(100% - (1.75rem * 2));
  }
  .modal-dialog-centeredh {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    min-height: calc(100% - (.5rem * 2));
  }
  input[type=numberl]::-webkit-inner-spin-button { 
    -webkit-appearance: none;
    cursor:pointer;
    display:block;
    width:8px;
    color: #333;
    text-align:center;
    position:relative;
  }
  input[type=numberl] { 
   -moz-appearance: textfield;
   appearance: textfield;
   margin: 0; 
 }
<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>
<body>
  <!-- Page Content -->
  <section class="py-5">
    <div class="container">
      <div class="row justify-content-sm-center">
        <div class="row">
          <div class="card" style="width: 18rem;">
            <img class="card-img-top" src="https://constru360.com.br/wp-content/uploads/2016/04/imoveis-mercado-imobiliario.jpg" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Imóveis</h5>
              <p class="card-text">Propriedade Rurais, Apartamentos, Casas </p>
            </div>
            <ul class="list-group list-group-flush">
              <li class="list-group-item text-center"><a href="telanuncio.php" class="card-link">Ver Anuncios</a></li>
            </ul>
            <div class="card-body text-center">
              <button class="btn btn-secondary btn-lg" data-toggle="modal" data-target="#exampleModal">Faça o seu Anuncio</button>
            </div>
          </div>

          &nbsp&nbsp&nbsp  

          <div class="card" style="width: 18rem;">
            <img class="card-img-top" src="imgs/img-cr.jpg" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Automóveis</h5>
              <p class="card-text">Carros, Caminhões, Caminhonetes, Motos, Etc</p>
            </div>
            <ul class="list-group list-group-flush">
              <li class="list-group-item text-center"><a href="telanuncio.php" class="card-link">Ver Anuncios</a></li>
            </ul>
            <div class="card-body text-center">
             <button class="btn btn-secondary btn-lg" data-toggle="modal" data-target="#exampleModal">Faça o seu Anuncio</button>
           </div>
         </div>

         &nbsp&nbsp&nbsp

         <div class="card" style="width: 18rem;">
           <img class="card-img-top" src="imgs/img-gd.jpg" alt="Card image cap">
           <div class="card-body">
            <h5 class="card-title">Bovinos</h5>
            <p class="card-text">Novilhas, Novilhos, Terneiras, Terneiros, Vaca com Cria, Etc</p>
          </div>
          <ul class="list-group list-group-flush">
            <li class="list-group-item text-center"><a href="telanuncio.php" class="card-link">Ver Anuncios</a></li>
          </ul>
          <div class="card-body text-center">
           <button class="btn btn-secondary btn-lg" data-toggle="modal" data-target="#exampleModal">Faça o seu Anuncio</button>
         </div>
       </div>

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

  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Teste</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="false">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <center>
            <h3 class="font-weight-bold">Você já é Cadastrado?</h3>
          </center>
        </div>
        <div class="modal-footer">
          <button class="btn btn-primary" data-toggle="modal" data-target="#exampleModal4" data-dismiss="modal">Sim</button>
          <button class="btn btn-secundary" data-toggle="modal" data-target="#exampleModal6" data-dismiss="modal">Não</button>
        </div>
      </div>
    </div>
  </div>


  <!-- Modal -->
  <div class="modal fade" id="exampleModal4" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel4" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Login</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <!-- Tab panes -->
          <form class="form-horizontal"  action="" method="POST">
            <div class="form-group">
              <label class="col-sm-2 control-label">Usuário</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="usuario" placeholder="Usuário">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">Senha</label>
              <div class="col-sm-10">
                <input type="password" class="form-control" id="senha" placeholder="Senha">
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
          <button type="submit" class="btn btn-success"  data-toggle="modal" data-target="#exampleModal1" data-dismiss="modal">Entrar</button>
        </div>
      </div>
    </div>
  </div>


<div class="modal fade" id="exampleModal6" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel6" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Cadastre-se primeiro!</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 class="form-group top">
          <form class="form-horizontal">
            <div class="form-group">
              <label class=" control-label" for="nome">Nome:</label>  
              <div class="">
                <input id="nome" name="nome" type="text" placeholder="Nome Completo" class="form-control input-md" required="">
              </div>
            </div>
            <div class="form-group">
              <label class=" control-label" for="Nome">Nascimento</label>  
              <div class="">
                <input id="dtnasc" name="dtnasc" placeholder="DD/MM/AAAA" class="form-control input-md" required="" type="date" maxlength="10" OnKeyPress="formatar('##/##/####', this)" onBlur="showhide()">
              </div>
            </div>

            <div class="form-group">
              <label class=" control-label" for="cpf">CPF:</label>  
              <div class="">
                <input id="cpf" name="cpf" type="number" placeholder="CPF" class="form-control input-md">

              </div>
            </div>
            <div class="form-group">
              <label class=" control-label" for="end">Endereço:</label>  
              <div class="">
               <input id="end" name="end" type="text" placeholder="Rua/Avenida e Número" class="form-control input-md" required="">
             </div>
           </div>

           <div class="form-group">
            <label class="control-label" for="sexo">Sexo:</label>
            <div class="">
              <select id="sexo" name="sexo" class="form-control">
                <option value="Não informado">Não informado</option>
                <option value="Masculino">Masculino</option>
                <option value="Feminino">Feminino</option>
              </select>
            </div>
          </div>

          <div class="form-group">
            <label class=" control-label" for="telefone">Telefone:</label>  
            <div class="">
              <input id="telefone" name="telefone" type="tel" placeholder="Telefone" class="form-control input-md" required="">

            </div>
          </div>

          <div class="form-group">
            <label class=" control-label" for="email">E-mail:</label>  
            <div class="">
              <input id="email" name="email" type="text" placeholder="E-mail" class="form-control input-md" required="">
            </div>
          </div>
        </form>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
      <button type="submit" class="btn btn-primary" >Proximo</button>
    </div>
  </div>
</div>
</div>


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>

Se eu clico no botão Fazer Anuncio e depois no modal da pergunta em clico em sim eu serei direcionado para o modal de login eu clico em entrar deveria mostrar o modal do anuncio em que o usuario clicou no card.

Fonte Link

Como mudar conteúdo do Modal?

Ola, eu tenho três botões e precisos mudar o conteúdo do modal dependendo do botão clicado, segue abaixo o código dos botões.

<button class="btn btn-secondary btn-lg" data-toggle="modal" data-target="#exampleModal1">Faça o seu Anuncio</button>

<button class="btn btn-secondary btn-lg" data-toggle="modal" data-target="#exampleModal2">Faça o seu Anuncio</button>

<button class="btn btn-secondary btn-lg" data-toggle="modal" data-target="#exampleModal3">Faça o seu Anuncio</button>

Se eu clico no botão 1 mostra o modal 1 apos 2 outros modais que já tenho e assim para cada botão.