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">×</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?