Textbox not clickable in TinyMCE modal box

Question

I'm developing a panel for a client which features a 'New Blog Post' button which opens up a modal and in that modal it is possible to click an 'Add image' box which opens another modal. The issue here is the fact that the 'Add image's' modal box contains text boxes which are supposed to be clickable however, these are not.

I was experimenting with Z-Index's to see if that was the issue however, I had no luck with resolving the problem.

These modals consist of Bootstrap and TinyMCE(for editing).

It can be found here: http://olidev.me/testpanel/ : under the 'American site' tab, click 'Add Blog Post' and then click on the 'Insert' tab on tool bar in the 'Post' area and 'Insert image'.

Sorry for the confusing access to this issue but hopefully its easily resolvable.

EDIT: I tried another application called 'CKEDITOR' and the exact same problem occurred, is this due to the 3 modals overlapping eachother??

Answer 1

After looking into what you said about inserting an image, I also found it's the same behavior with videos. And it led me to believe the reason why is because you need to use a file manager plugin in order to handle files in TinyMCE, such as MoxieManager.

Once you have that, your image/video windows will look like this:

Then you will be able to choose and accept files.
Here is the official answer from the TinyMCE FAQ page:

Answer 2

Problem:

If you have a bootstrap modal with TinyMCE inside it and you want to insert a link or other option where it opens a tinyMCE dialog with text input field you cannot get focus on the input text fields (like it is in a disabled state)

Solution:

Remove the tabindex="-1" from the bootstrap modal html. This can be done in on the modal html container or prior initialization of TinyMCE.