(bootstrap 3)Lost focus when open second window from first - twitter-bootstrap-3

Question

I'm using bootstrap for create modal windows in my project. When i create only one window all work fine. If i create second window from first i have a problem.
In First window when i try to scroll it all fine. Window is scrolling. When i open next window from it - scrolling not a current window. Scrolling body behind it.
Example https://jsfiddle.net/rz4p503n/5/
For create modal window I'm using such function:
function createModalWindow(windowid, parentid, template){
if (parentid.localeCompare('')!=0){
$(('#' + parentid)).modal('hide');
}
$('#' + windowid).detach();
$("body").append(template);
$('#' + windowid).modal('show');
}
When i create first window body has class 'modal-open'. It removed after create next window.
Why is this happening?
I think lost a focus for scrolling because body hasn't this class.
UPD: I tried to modify create/close window function such as:
$('body').on('click','.close-and-exit', function () {
console.log('try to close');
var windowid =$(this).closest('.modal').attr('id');
var parentid =$(this).closest('.modal').attr('data-parentid');
console.log({windowid: windowid, parentid:parentid});
$('#' + windowid).modal('hide');
$(('#' + windowid)).on('hidden.bs.modal', function (e) {
//$('#' + parentid).modal('show');
console.log('window: ' + windowid + ' is closed');
if (typeof parentid!=='undefined'){
if(parentid.localeCompare('')!=0){
console.log(' try to show parent window: ' + parentid);
$('#' + parentid).modal('show');
}
}
})
});
function createModalWindow(windowid, parentid, template){
console.log('parentid: ' + parentid);
console.log('windowid: ' + windowid);
if (parentid.localeCompare('')!=0){
$(('#' + parentid)).modal('hide');
$(('#' + parentid)).on('hidden.bs.modal', function (e) {
console.log('parent is hided. create new windowЖ');
$('#' + windowid).detach();
$("body").append(template);
$('#' + windowid).modal('show');
})
}
else{
$('#' + windowid).detach();
$("body").append(template);
$('#' + windowid).modal('show');
}
}
Focus not losses. Scrol work only in current window. But a can not close first window after second window. Everytime running
$(('#' + parentid)).on('hidden.bs.modal', function (e) {...});
from function createModalWindow and it call
$('#' + windowid).detach();
$("body").append(template);
$('#' + windowid).modal('show');
How I can fix it? I need to scroll and close the window correctly too.

Answer 1

I fixed this problem using hidden.bs.modal.
For create function:
function createModalWindow(windowid, parentid, template){
if (parentid.localeCompare('')!=0){
$(('#' + parentid)).modal('hide');
$(('#' + parentid)).on('hidden.bs.modal', function (e) {
console.log('parent is hided. try to set modal class for body');
if (($('body').hasClass('modal-open')==false)&& (parentid.localeCompare('')!=0)){
$('body').addClass('modal-open');
}
})
}
$('#' + windowid).detach();
$("body").append(template);
$('#' + windowid).modal('show');
}
For close window:
$('body').on('click','.close-and-exit', function () {
console.log('try to close');
var windowid =$(this).closest('.modal').attr('id');
var parentid =$(this).closest('.modal').attr('data-parentid');
$('#' + windowid).modal('hide');
$(('#' + windowid)).on('hidden.bs.modal', function (e) {
console.log('window: ' + windowid + ' is closed');
if (($('body').hasClass('modal-open')==false)&& (parentid.localeCompare('')!=0)){
$('body').addClass('modal-open');
}
});
if (typeof parentid!=='undefined'){
if(parentid.localeCompare('')!=0){
console.log(' try to show parent window: ' + parentid);
$('#' + parentid).modal('show');
}
}
});
For undestand: when the hidden.bs.modal is triggered, I call a check body hasClass 'modal-open' and parentid is not null. Script will add class 'modal-open' to body if body hasn't this class and present parent window