How to change Modal content?

Navigation
0

.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>

Hello, I have three buttons and need to change the contents of the modal depending on the button clicked, follow below the code of the buttons. 

<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>

If I click on the button Make Ad and then on the modal of the question I click on Yes, I will be directed to the modal of login I click on enter should show the modal of the advertisement in which the user clicked on the card.

    
asked by anonymous 22.06.2018 / 15:16

1 answer

0

As far as I understand the flow you went through when you clicked "sign in" the user would be redirected to the modal of the ad that he previously selected. However the enter button is pointing to data-target="#exampleModal1" , and there is no modal with that id in html.

I would suggest saving with javascript the type of ad that he chose by creating a hidden element on the page. For example. you would add% direct% in html. Do not forget to add an id in the car ad button. Then you can change the value of this hidden according to the ad clicked. 

$('#anuncio-automoveis').on('click', function (e) {
    //altera o valor do hidden
    $('#anuncio-usuario').val('automoveis');
});

Then you can add an id on the enter button, and a click event on the javascript: 

$('#bt-entrar').on('click', function (e) {
    var anuncio = $('#anuncio-usuario').val();

    if (anuncio == 'automoveis') {
        $('#modal-automoveis').openModal();
    }
});
    
22.06.2018 / 20:36
How to disable PDF download tool (icon) on a web page / iframe? Why (! + [] + [] +! []). length returns 9 in JavaScript?