Skip to main content
adicionou 44 caracteres ao conteúdo
Fonte Link
user24136
user24136

Gostaria que ao clicar no botão, abrisse em um modal Bootstrap o conteúdo de outra página. Tenho o seguinte código abaixo:

<script src="js/jquery.min.js"></script>
<button class="btn btn-success" id="btnImprimir" title="Clique para imprimir sua carteira" data-toggle="modal"><i class="fas fa-print"></i> Imprimir</button>
    <div class="modal drag" id="modalImprimir" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
              <div class="modal-dialog">
                  <div>
                      <div id="tela">
                      </div>
                  </div>
              </div>
          </div>
    <script>
              $("button").on('click',"#btnImprimir", function(){
                alert('aqui');
                  $.post('carteira-imprimir.php', function(retorno){
                         $("#modalImprimir").modal({ backdrop: 'static' });
                         $("#tela").html(retorno);
                  });
              });
    </script>

E a página carteira-imprimir.php

<div class="modal-content">
    <div class="modal-header bg-primary text-white">
      <h5 class="modal-title" id="exampleModalLabel" style="font-weight: bold"><i class="fas fa-address-card"></i> CARTEIRA ESCOLAR</h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
     Conteúdo
    </div>
</div>

Só que ao clicar, não funcionaabre o modal e nem o alert() que coloquei para teste. Como faço para corrigir isso?

Gostaria que ao clicar no botão, abrisse em um modal Bootstrap o conteúdo de outra página. Tenho o seguinte código abaixo:

<script src="js/jquery.min.js"></script>
<button class="btn btn-success" id="btnImprimir" title="Clique para imprimir sua carteira" data-toggle="modal"><i class="fas fa-print"></i> Imprimir</button>
    <div class="modal drag" id="modalImprimir" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
              <div class="modal-dialog">
                  <div>
                      <div id="tela">
                      </div>
                  </div>
              </div>
          </div>
    <script>
              $("button").on('click',"#btnImprimir", function(){
                alert('aqui');
                  $.post('carteira-imprimir.php', function(retorno){
                         $("#modalImprimir").modal({ backdrop: 'static' });
                         $("#tela").html(retorno);
                  });
              });
    </script>

E a página carteira-imprimir.php

<div class="modal-content">
    <div class="modal-header bg-primary text-white">
      <h5 class="modal-title" id="exampleModalLabel" style="font-weight: bold"><i class="fas fa-address-card"></i> CARTEIRA ESCOLAR</h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
     Conteúdo
    </div>
</div>

Só que ao clicar, não funciona. Como faço para corrigir isso?

Gostaria que ao clicar no botão, abrisse em um modal Bootstrap o conteúdo de outra página. Tenho o seguinte código abaixo:

<script src="js/jquery.min.js"></script>
<button class="btn btn-success" id="btnImprimir" title="Clique para imprimir sua carteira" data-toggle="modal"><i class="fas fa-print"></i> Imprimir</button>
    <div class="modal drag" id="modalImprimir" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
              <div class="modal-dialog">
                  <div>
                      <div id="tela">
                      </div>
                  </div>
              </div>
          </div>
    <script>
              $("button").on('click',"#btnImprimir", function(){
                alert('aqui');
                  $.post('carteira-imprimir.php', function(retorno){
                         $("#modalImprimir").modal({ backdrop: 'static' });
                         $("#tela").html(retorno);
                  });
              });
    </script>

E a página carteira-imprimir.php

<div class="modal-content">
    <div class="modal-header bg-primary text-white">
      <h5 class="modal-title" id="exampleModalLabel" style="font-weight: bold"><i class="fas fa-address-card"></i> CARTEIRA ESCOLAR</h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
     Conteúdo
    </div>
</div>

Só que ao clicar, não abre o modal e nem o alert() que coloquei para teste. Como faço para corrigir isso?

Fonte Link
user24136
user24136

Modal Bootstrap abrir conteúdo de outra página

Gostaria que ao clicar no botão, abrisse em um modal Bootstrap o conteúdo de outra página. Tenho o seguinte código abaixo:

<script src="js/jquery.min.js"></script>
<button class="btn btn-success" id="btnImprimir" title="Clique para imprimir sua carteira" data-toggle="modal"><i class="fas fa-print"></i> Imprimir</button>
    <div class="modal drag" id="modalImprimir" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
              <div class="modal-dialog">
                  <div>
                      <div id="tela">
                      </div>
                  </div>
              </div>
          </div>
    <script>
              $("button").on('click',"#btnImprimir", function(){
                alert('aqui');
                  $.post('carteira-imprimir.php', function(retorno){
                         $("#modalImprimir").modal({ backdrop: 'static' });
                         $("#tela").html(retorno);
                  });
              });
    </script>

E a página carteira-imprimir.php

<div class="modal-content">
    <div class="modal-header bg-primary text-white">
      <h5 class="modal-title" id="exampleModalLabel" style="font-weight: bold"><i class="fas fa-address-card"></i> CARTEIRA ESCOLAR</h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
     Conteúdo
    </div>
</div>

Só que ao clicar, não funciona. Como faço para corrigir isso?