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?