Question

I have a TinyMCE editor embedded in my page. The editor’s full screen option occupies the entire screen which is working fine. I also have a button which pops up a modal window using Twitter bootstrap and it works fine in normal view. But when tinymce editor is in fullscreen mode, the modal window is getting initialized but not visible.

And when I go out of fullscreen window, the modal window appears. So its getting shown but it is in the background. How do i make it appear even in fullscreen mode?

tinymce.init({
                            mode: "exact",
                            elements: "tinymce",
                            theme: "advanced",
                            plugins: 'ice,icesearchreplace,fullscreen',
                            theme_advanced_buttons1: "ec_error,fullscreen,strikethrough,|,bold,italic,underline,|,undo,redo,|,search,replace,|,ice_togglechanges,ice_toggleshowchanges,iceacceptall,icerejectall,iceaccept,icereject",
                            theme_advanced_buttons2: "",
                            theme_advanced_buttons3: "",
                            theme_advanced_buttons4: "",
                            theme_advanced_toolbar_location: "top",
                            theme_advanced_toolbar_align: "left",
                            fullscreen_new_window : false,
                            extended_valid_elements: "p,span[*],delete[*],insert[*]",
                            ice: {
                                user: { name: 'Email Coach', id: 11},
                                preserveOnPaste: 'p,a[href],i,em,b,span'
                            },
                            height: '500',
                            width:'100%'
                        });

Answer 1

TinyMCE’s #mce_fullscreen_container is z-index: 20000;
Bootstrap’s .modal is z-index: 1050; and .modal-backdrop (background fading) is z-index: 1040;

So, raise z-index of your modal window over 20000

.modal {
    z-index: 30050;
}
.modal-backdrop {
    z-index: 30040;
}