Open html page in the modal

Question

Open html page in the modal

Navigation

#1 by (2 votes)

4

I have the following html pages: cadastrocliente , cadastroadirectory and cadastrocontact .

In my customer register I have two buttons: id="btnCadastroEndereco" and id="btnCadastroContato" .

When I click on these buttons I would like to open their respective html in a modal id="myModal" (For example when I click on the button btnCadastroContato you would like to open the cadastrocontact .html in modal or as change the content would use only a modal to solve this problem)

 $('#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?
    });

I'm using jquery.js, bootstrap.js and php.

html modal bootstrap

asked by anonymous 29.12.2017 / 14:35

1 answer

Why does the decrease of the subnet mask double the original network size? Error making application deploy in GlassFish: org.objectweb.asm.ClassReader.init - java.lang.ArrayIndexOutOfBoundsException

score 2 · Answer 1

I have a solution that you can use, but the page where the modal will be needs to be in .php. It does not need script or anything. It's pretty simple, in fact, you just need to include% modal.

Obs1: does not work to call pages from "third party" type ( link ), it just goes call the .html file from your directory.

Obs2: You have to format <?php include 'cadastrocontato.html';?> to fit within 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>

Opening two modals one in each BTN

Where is html you put your .html that is in the directory.

<!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><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>