Open the same modal in other html pages JQuery

I have a modal on an html page

<div class="modal fade" data-backdrop="static" data-keyboard="false" id="modalPreferenciasUsuarioLogado" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div style="color: white; background-color: #0c4677" class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h3 class="modal-title">
                        <strong>Preferências</strong>
                    </h3>
                </div>
                <div class="modal-body">
                    <form novalidate name="frmPreferencia" id="formCadastro" role="form">
                        <div class="row">
                            <div>
                                <div class="form-group col-md-12">
                                    <div class="form-group">
                                        <input type="file" id="file" fileinput="file" filepreview="filepreview" />
                                    </div>
                                </div>
                                <div class=" form-group col-md-3" style="height: 200px;">
                                    <img id="imagemPaciente" src="" style="width: 180px;" ng-src="{{filepreview}}" class="img-responsive img-circle" ng-show="filepreview"
                                        ng-model="paciente.pessoa.foto" />
                                </div>
                            </div>

                            <div class="form-group col-md-6">
                                <label>Login:</label> <input maxlength="120" disabled="disabled" type="text" class="form-control" ng-model="paciente.pessoa.nome" />
                            </div>
                            <div class="form-group col-md-3">
                                <label>Nome:</label> <input maxlength="16" type="text" class="form-control" ng-model="paciente.cns" />
                            </div>
                            <div class="form-group col-md-6">
                                <label>E-mail:</label> <input maxlength="120"  type="email" class="form-control" ng-model="paciente.pessoa.nomeSocial" />
                            </div>
                            <div class="form-group col-md-6">
                                <label>Senha:</label> <input maxlength="120"  type="password" class="form-control" ng-model="paciente.pessoa.nomeSocial" />
                            </div>

                                </div>
                                </form>
                            </div>

                    <div class="modal-footer">
                       <button style="background-color: #b51e27; color: white;" type="button" class="btn btn-default" data-dismiss="modal" ng-click="salvarPacientes()">Salvar</button>
                       <button style="background-color: #b51e27; color: white;" type="button" class="btn btn-default"  ng-click="cancelarAlteracaoPacientes(pac)" data-dismiss="modal">Cancelar</button>
                    </div>                  
                </div>
            </div>
        </div>

I'm doing this and it's not working

 $('#btnCarregarModalPreferenciasUsuarioLogado').click(function() {

         $( "#divAbreModal" ).load( "./modalPreferenciaUsuarioLogado.html" );       

        });

I'm having the following error on my console

jquery-1.12.3.min.js:4 GET http://localhost:8090/modalPreferenciaUsuarioLogado.html 404 ()
send @ jquery-1.12.3.min.js:4
ajax @ jquery-1.12.3.min.js:4
n.fn.load @ jquery-1.12.3.min.js:4
(anonymous) @ escolherEntidadecontroller.js:53
dispatch @ jquery-1.12.3.min.js:3
r.handle @ jquery-1.12.3.min.js:3

I need to open this modal on other pages, how do I call this modal on the other pages using JQuery ??