Second modal limited to the first modal area - css

Question

Using bootstrap 3.3.5 and trying to open a second modal, and found a strange behavior:
The backdrop do not show around the second modal, instead of it
covers the backdrop from the first modal
The second modal is
limited to the area of the first modal.
Check the example: http://jsfiddle.net/2zqe93u1/show/
Looking for a way to show the second modal with the backdrop around it and with no area limited by the first modal.
Code:
<div class="modal bs-modal-lg" id="FirstModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="FiltroLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<span class="modal-title">Title #1</span>
</div>
<div class="modal-body">
<div class="modal" id="SecondModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Title #2</h4>
</div>
<div class="modal-body">
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-number="2">Close</button>
</div>
</div>
</div>
</div>
<a data-toggle="modal" href="#SecondModal" class="btn btn-primary btn-block">Open the second modal</a>
</div>
<div class="modal-footer">
<a data-loading-text="Wait" class="btn btn-default">Cancel</a>
</div>
</div>
</div>
</div>

Answer 1

As said #Tim Lewis bootstrap doesn't support stacked modal and Showing more than one modal at a time requires custom code
First Remove 2nd modal HTML inside the First Modal and put it outside, so the HTML will be;
<div class="modal bs-modal-lg" id="FirstModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="FiltroLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<span class="modal-title">Title #1</span>
</div>
<div class="modal-body">
<a data-toggle="modal" href="#SecondModal" class="btn btn-primary btn-block">Open the second modal</a>
</div>
<div class="modal-footer">
<a data-loading-text="Wait" class="btn btn-default">Cancel</a>
</div>
</div>
</div>
</div>
<div class="modal" id="SecondModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Title #2</h4>
</div>
<div class="modal-body">
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-number="2">Close</button>
</div>
</div>
</div>
</div>
It will fix the problem second modal is limited to the area of the first modal.
Now to fix the problem backdrop do not show around the second modal, instead of it covers the backdrop from the first modal
add following code in JS
$(document).ready(function () {
$('#SecondModal').on('show.bs.modal', function () {
$('#FirstModal').css('z-index', 1039);
});
$('#SecondModal').on('hidden.bs.modal', function () {
$('#FirstModal').css('z-index', 1041);
});
});
Fiddle

Answer 2

You have to work with two modals separeted to achieve this goal.
The first point i can do it with this
https://jsfiddle.net/2zqe93u1/
$('#FirstModal').modal('show');
$('#SecondModal').on('shown.bs.modal', function (e) {
$('.modal-backdrop').first().appendTo($(this).parent())
})
$('#SecondModal').on('hidden.bs.modal', function (e) {
$('.modal-backdrop').first().remove()
})
$("button[data-number=2]").click(function(){
$('#SecondModal').modal('hide');
});
But i can't understand the second one, if the second modal can be dragged out of the first, why the backdrop must be on the first?
But with the events ocurring on modal i'm sure you can do this.
Take a look at jsfiddle to catch the ideas