We've moved discussions to Discord

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.
Darren Smyth
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.
 Can you speak to this issue at all?
Pablo Soldi
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 
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.
Darren Smyth
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.
 Can you speak to this issue at all?
Pablo Soldi
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 
Notifications
You’re not receiving notifications from this thread.
© 2022 Jumpstart Pro by GoRails, LLC