How to change Modal content?

Asked

Viewed 637 times

1

.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 content of the modal depending on the button clicked, follows 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 Advertise button and then on the modal of the question I click yes I will be directed to the login modal I click on login should show the modal of the advertisement in which the user clicked on the card.

php javascript html css3

  • Where the content of each modal comes from?

  • from the same page where the buttons are

  • Well, if each button has one target different, automatically is called 3 different modal, it is not only change your content?

  • But the contents are in a specific div of each one? Why not put it directly by PHP?

  • Yeah, but I don’t work.

  • It would have to be with Javascript.

  • Did I add the code to make it better? The last modal (after the login and registration modal) should be inserted (advertisement modal) depending on the button clicked on the card

  • The latest modal is not the registration? Just put in the button the id of the modal you want to open. Sorry but it’s still not clear what you want to do.

Show 3 more comments

1 answer

1

From what I understood by the flow that you went through when clicking on "enter" the user would be redirected to the modal of the ad that he previously selected. Meanwhile the login button is pointing to the data-target="#exampleModal1", and there is no modal with this id in html.

I would give you the suggestion to save with javascript the type of ad he chose by creating a Hidden element on the page. e.g. you would add a <input hidden id="anuncio-usuario" value=""> straight into html. Don’t forget to add an id to the car ad button. Then you can change the value of that Hidden according to the clicked ad.

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

Then you can add an id to the login button, and a javascript click event:

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

    if (anuncio == 'automoveis') {
        $('#modal-automoveis').openModal();
    }
});

Browser other questions tagged php javascript html css3

You are not signed in. Login or sign up in order to post.