Open html page in modal

Asked

Viewed 2,577 times

4

I have the following html pages: client record, cadastral and contact record.

In my client record 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 the button btnCadastroContato would like to open the contact record.html in modal or as it would change content would use only one 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 am using jquery.js, bootstrap.js and php.

html twitter-bootstrap modal

1 answer

2

I have a solution that you can use, but the page where the modal will be needs to be in .php. It doesn’t need script or anything. It’s quite simple actually just need to include <?php include 'cadastrocontato.html';?> in modal.

Obs1: does not work to call pages "third party" type (http://www.globo.com/), it will only call the . html file from your directory.

Obs2: you have to format the html to fit inside the 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 <!-- Aqui vc chama a sua página --> you put your . html 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>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

  • Right, but I have two pages to call. at a time the contact page and at another the address page. how can I do to know which include to call?

  • Bruno from what I read in your question I understood that you will have 2 buttons correct? Then just make two Modals with different Ids. Do Two Buttons and each place the id of the Modal data-target="#exampleModal1" and data-target="#exampleModal2" and the Modal div id="exampleModal1" and div id="exampleModal2" and within each Modal <?php include 'contact.html'? > and <?php include 'registration.html';?>

  • @Brunoaparecido Silva includes in the answer the code of how to call the Dois Modais.

  • Got it, the way you said it works, but I have a modal only and I can use it to open the two pages ... this is logic

  • i have <div class="modal-body">... is there any way I can get . html from that div and put my page inside? something like $('#div'). html(contact registration.php or .html) and the same p/ address)

  • @Brunoaparecido odasilva I have no knowledge of JS to help you in this rss. But you can think of a logic that depending on the Btn that he click (1 or 2) he calls the include 1 or 2 within the <div class="modal-body">

  • Thanks, I’ll try to do some research or see if anyone can help me kkkkk

Show 2 more comments

Browser other questions tagged html twitter-bootstrap modal

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