Form fields conflicting with modal popup

I am running into an unexpected issue with modal popups. When the popup is activated, all my form fields remain above the modal in visibility (Z-index). It's a little tough to explain so I've attached a screenshot showing the form fields overriding the popup. This is primarily an issue when confirming deletions.

That's interesting as I am having the same problem. I thought it was something I had done ... so hopefully this has a potential solution.

Chris Oliver  Can you speak to this issue at all?

Hey, I had the same problem.

What I did to fixed it, it was to change the app/javscript/src/confirm.js file.

//element.insertAdjacentHTML('afterend', content)
document.body.insertAdjacentHTML('beforeend', content);

//var modal = element.nextElementSibling;
var modal = document.getElementById(id);

So, basically what I read is that the z-index in DOM depends on the parent. In the previous js code, If you have a data-confirm link or a form, the modal will be created right after the clicked element in the html causing this kind of issues. 
That is why I moved the modal to the body, in that way we can be sure that any other element will modify the presentation of our modal