I understand you want to abandon jQueryUI .

Following its operation, the method open , and in this open the new url is loaded using load .

As it is in jQueryUI:

HTML example:

 <!-- DECLARANDO DIV -->
 <div id="cliente">

JS Example:

$('#cliente').dialog({
   autoOpen: false,
   height: 550,
   width: 860,
   modal: true,
   title: 'Cliente',
   show: "blind",
   buttons: {
      'Sair': function () {
         $(this).dialog('close');
      }
   },
   position: {
      at: 'top'
   },
   open: function () {
      $(this).load('cliente.html'); // Aqui permitimos que seja carregado a página.
   }
});

// Chamando a dialog no click 
 $('#cliente').dialog("open");

Now reproducing this structure in Bootstrap:

HTML example:

 <!-- DECLARANDO DIV -->
 // Apenas acrescentamos a classe para dar o efeito do Bootstrap.
 <div id="cliente" class="modal fade">

JS Example:

function loadModal(id,url){
    $('#' + id).on('show.bs.modal', function () {
        $(this).load(url);
    });
}
// Chamando a função:
loadModal('Cliente','cliente.html')

// Chamando a modal no click, você pode usar tanto js quanto html usando o href:
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Cliente</a>

And your pages should include all content within class modal-dialog :

<div class="modal-dialog">
  <div class="modal-content modal-lg">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h4 class="modal-title">Modal 1</h4>
    </div>
    <div class="container"></div>
    <div class="modal-body">
      <h1> Algum conteúdo aqui.</h1>
    </div>
    <div class="modal-footer">
      <a href="#" data-dismiss="modal" class="btn btn-danger">Pesquisar</a>
    </div>

    <div class="modal fade" id="myModal3" data-remote="index3.html">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">

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

Within these included pages you can open as many modals as you like using função loadModal() .

Just be sure to declare the div on the homepage.

I await your Feedback.

Instead of creating multiple modalities, use only data-target by calling content into its modal data-target="#id_objeto" and pass parameters or behavior via data-qualquercoisa :

<div id="id_objeto">Seu conteúdo</div>

You can make your content dynamic in this way

Or you can make a modal inside modal like this

You can try dealing with multiple modals by working with backdrop and Z-index of Modal.

How?

Using setTimeout , because .modal-backdrop is not created when the show.bs.modal event is triggered.

I believe this code should help.

Reference

Now, as for the use of data-remote , once a Modal object is instantiated, it is bound to the target element. Each subsequent call will not update the values in the remote options. So attributes are different for each instance , when Modal is toggled, the value of data-remote is not being updated .

In addition to the previous fact, the Modal plugin loads data-remote into the Modal object constructor, so even if a change is made to the remote options it will never be reloaded.

One possible trick to be implemented would be:

$('body').on('hidden.bs.modal', '.modal', function () {
  $(this).removeData('bs.modal');
});

Or you can try to make things difficult and do something like a page path check that should appear in the modal, whether or not it is different from the previous one. If it is, destroy; if it is not, then there is no need to reload.

$('[data-load-remote]').on('click',function(e) {
    e.preventDefault();
    var $this = $(this);
    var remote = $this.data('load-remote');
    if(remote) {
        $($this.data('remote-target')).load(remote);
    }
});

<a href="#myModal" role="button" class="btn" data-toggle="modal" data-load-remote="http://fiddle.jshell.net/q89Lhmss/0/show/" data-remote-target="#myModal .modal-body">Página 1</a>
<a href="#myModal" role="button" class="btn" data-toggle="modal" data-load-remote="http://fiddle.jshell.net/ng75mLnz/0/show/" data-remote-target="#myModal .modal-body">Página 2</a>
<a href="#myModal" role="button" class="btn" data-toggle="modal" data-load-remote="http://fiddle.jshell.net/jvr0dj61/0/show/" data-remote-target="#myModal .modal-body">Página 3</a>
<a href="#myModal" role="button" class="btn" data-toggle="modal" data-load-remote="http://fiddle.jshell.net/zsjq4u8z/0/show/" data-remote-target="#myModal .modal-body">Página 4</a>

<div class="modal hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal Principal</h3>
  </div>
  <div class="modal-body">
    <p>Alguma coisa</p>
  </div>
  <div class="modal-footer">
    <button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">Fechar</button>
  </div>
</div>

Example working HERE .

Reference

Here's an example of doing this thing there with jquery ui

var $modal = $('<div>');
        $modal.css('line-height','1').html('teste1')
            .dialog({width :400,height: 250,modal: true,closeOnEscape: false,title:'Aviso',
                buttons: { Ok:function(){ $(this).remove(); } }
            }); 

var $modal = $('<div>');
        $modal.css('line-height','1').html('teste2')
            .dialog({width :400,height: 250,modal: true,closeOnEscape: false,title:'Aviso',
                buttons: { Ok:function(){ $(this).remove(); } }
            }); 
var $modal = $('<div>');
        $modal.css('line-height','1').html('teste3')
            .dialog({width :400,height: 250,modal: true,closeOnEscape: false,title:'Aviso',
                buttons: { Ok:function(){ $(this).remove(); } }
            }); 
var $modal = $('<div>');
        $modal.css('line-height','1').html('teste4')
            .dialog({width :400,height: 250,modal: true,closeOnEscape: false,title:'Aviso',
                buttons: { Ok:function(){ $(this).remove(); } }
            }); 

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

In Bootstrap, remote modes are opened in modal-content and remote content, or remote modal, has the basic parts as header , body and footer . You should repeat it by logic. The question is como é que você vai renderizar o segundo, terceiro, quarto... modais se no primeiro dado remoto o modal não carrega uma classe 'modal-content' ?

Explain!

You have the first page:

<a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</a>

<div class="modal fade" id="myModal" tabindex="-1" data-remote="http://fiddle.jshell.net/hwksuycy/20/show/" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    
    
    <!-- é essa classe que importa no Bootstrap 3.5 -->
    <div class="modal-content">
        <!-- o segundo modal será carregado aqui ou terá como alvo (target) esse elemento âncora, a CLASSE modal-content -->  
    </div>
  </div>
</div>

See FIDDLE

The modal-content class is what really matters here, such as seen in the documentation >.

Now on the remote page you have the following:

<div class="modal-header">
   <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
   <h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
   <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">Open Modal 2</button>

</div>
<div class="modal-footer">
   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
   <button type="button" class="btn btn-primary">Save changes</button>
</div>



<div class="modal fade" id="myModal2" tabindex="-2" data-remote="pagina3.html" role="dialog" aria-labelledby="myModalLabel">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
      </div>
   </div>
</div>

That is, you have primarily the content structure of a modal, but it does not have the modal-content class that is the anchor of the second modal, which loads a modal-content , but does not have one as parent .

Well, a simple solution would be to use the Modal Bootstrap extension .

Take a look at the " Stackable " section.

I was able to do this by creating containers for each modal, each with a different z-index, so one modal could overlap the other.

<div id="modalContainer"><!-- seu primeiro modal aqui --></div>
<div id="subModalContainer"><!-- seu segundo modal aqui --></div>

And in CSS:

#modalContainer { z-index: 100; }
#subModalContaineer { z-index: 1000; }