CODEWITHSUNDEEP
javascripttwitter-bootstraptinymce
Sripaul
Sripaul

Reputation: 2235

TinyMCE fullscreen not allowing modal window to appear

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%'
                        });

Upvotes: 2

Views: 2307

Answers (1)

albertedevigo
albertedevigo

Reputation: 18411

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;
}

Upvotes: 4

Related Questions