4

Tenho as seguintes páginas html: cadastrocliente, cadastroendereço e cadastrocontato.

No meu cadastrocliente eu tenho dois buttons: id="btnCadastroEndereco" e id="btnCadastroContato".

Quando eu clico nesses buttons gostaria de abrir seu respectivo html em um modal id="myModal" (Por exemplo quando eu clico no button btnCadastroContato gostaria de abrir o cadastrocontato.html no modal ou seja como mudaria o conteúdo usaria apenas um modal para resolver esse problema)

 $('#btnCadastroContato').click(function(){
           ('#myModal').modal('show'); 
           // Isso abre o modal, mas como eu faço 
para o modal abrir com o conteudo html da minha pagina cadastrocontato?
    });

estou utilizando o jquery.js, bootstrap.js e php.

2

1 Resposta 1

2

Tenho uma solução que vc pode usar, mas a página onde o modal vai estar precisa estar em .php. Não precisa de script nem nada. É bem simples na verdade só precisa inclur <?php include 'cadastrocontato.html';?> no modal.

Obs1: não funciona para chamar páginas de "terceiros" tipo (http://www.globo.com/), ela só vai chamar o arquivo .html do seu diretório.

Obs2: vc tem que formatar o html para encaixar dentro do Modal!

<!-- Trigger button do modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- 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">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      <?php include 'cadastrocontato.html';?> <!-- Aqui vc chama a sua página -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Abrindo Dois modais um em cada BTN

Onde está <!-- Aqui vc chama a sua página --> vc coloca o seu .html que está no diretório.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
    
</style>
</head>
<body>
    
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal1">
        Modal 1
    </button>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal1" 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">CONTATO</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
            Condeudo do mudal 1 : <pre>&lt;?php include 'contato1.html'; ?&gt;</pre> <!-- Aqui vc chama a sua página -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
            </div>
        </div>
    </div>

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal2">
        Modal 2
    </button>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal2" 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">ENDEREÇO</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
            Condeudo do mudal 2 : <pre>&lt;?php include 'contato2.html'; ?&gt;</pre> <!-- Aqui vc chama a sua página -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
            </div>
        </div>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

7
  • Certo, mas eu tenho duas paginas para chamar. em um momento a pagina de contato e em outro a pagina de endereço. como vou conseguir fazer para saber qual include devo chamar? 29/12/2017 às 15:23
  • Bruno pelo que li na sua pergunta eu entendi que vc vai ter 2 botões correto? Então basta fazer dois Modais com IDs diferentes. Faz Dois Buttons e em cada um coloca o id do Modal data-target="#exampleModal1" e data-target="#exampleModal2" e no Modal div id="exampleModal1" e div id="exampleModal2" e dentro de cada Modal <?php include 'cadastrocontato.html';?> e <?php include 'cadastroendereco.html';?>
    – hugocsl
    29/12/2017 às 15:47
  • @BrunoAparecidodaSilva inclui na resposta o código de como chamar os Dois Modais.
    – hugocsl
    29/12/2017 às 16:01
  • Entendi, do jeito que você falou funciona, porém eu tenho um modal só e eu posso usar ele para abrir as duas páginas ... essa é lógica 29/12/2017 às 16:16
  • eu tenho <div class="modal-body">... será que não tem como eu pegar o .html dessa div e coloca a minha pagina dentro? algo do tipo $('#div').html(cadastrocontato.php ou .html) e o mesmo p/ o endereço $('#div').html(cadastroendereco.php ou .html) 29/12/2017 às 16:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .