Bootstrap deja en claro en su documentación que no se permiten los
modales sobrepuestos, ya que esto requiere código personalizado.
Lo que puedes hacer es ocultar este ultimo de la siguiente manera
$('#modal2-Cerrar').on('click', function(evt){
evt.preventDefault()
$('#Modal2').modal('hide');
$('#Modal1').modal('show');
});
y tu botón quedaría de la siguiente forma en el segundo modal:
<button type="button" id="modal2-Cerrar" class="btn btn-primary btn-xs">Cerrar</button>
y en el botón superior seria lo mismo. Quedando este de la siguiente manera:
<button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
y en la función, el selector quedaría de esta forma $('#modal2-Cerrar, .close').on(...)
Actualizacion
Este ejemplo es usando dos modales con diferente id
en el cual se usa la versión de bootstrap 3.3.7, funciona correctamente con los modales añadidos, pero el backdrop
no cubre el primer modal (para hacer esto habría que jugar con jquery y css)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#Modal1">
Modal doble Default
</button>
<!-- Modal -->
<div class="modal fade" id="Modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</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="#Modal2">Lanzar segundo modal</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>
</div>
</div>
<!-- Segundo modal -->
<div class="modal fade" id="Modal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Aqui estoy en un segundo modal
</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>
</div>
</div>
Este segundo ejemplo es usando las funciones que te proporcione y quitando atributos que vienen por default, sucede lo mismo con el backdrop
$('#Modal2-cerrar, .close2').on('click', function() {
$('#Modal2').modal('hide');
$('#Modal1').modal('show');
});
$('#Modal1-cerrar, .close1').on('click', function() {
$('#Modal1').modal('hide');
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#Modal1">
Modal doble Ajustado
</button>
<!-- Modal -->
<div class="modal fade" id="Modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close close1"><span aria-hidden="true">×</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="#Modal2">Lanzar segundo modal</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="Modal1-cerrar">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Segundo modal -->
<div class="modal fade" id="Modal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close close2"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Aqui estoy en un segundo modal
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id='Modal2-cerrar'>Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>