openWYSIWYG - dynamic positioning

I am making a webpage that has different areas that can be clicked on to change the contents. I want to set it up so that when you click on an area, an openWYSIWYG editor appears in the middle of the screen with the rest of the page greyed out.

I have achieved this exc开发者_开发知识库ept for the positioning of the editor. When you click on a section I have a div with 50% opacity cover the page and a textarea appear in the middle. But when I try to attach the editor to the textarea, it loses it's position and falls behind the div not in front of it like the textarea is.

Can anyone suggest a way of centring the openWYSIWYG editor?

You're looking for Modal positioning. Here's one solution:

http://jqueryui.com/demos/dialog/#modal-form

Basically, apply the Jquery Dialog to the div that holds your WYSIWYG. Don't forget a submit button.

Just a quick heads up--I went through quite a bit of headache dealing with WYSIWYG editors for client-facing sites a few months back. It seems that clicking the "paste from WORD" button was a very difficult task to figure out. Word-pasted code can wreak havoc on websites, overrunning text fields in the database. I gave it a try on their demo (which also doesn't support webkit based browsers) and the result wasn't pretty. The only two options I found to solve this were to sanitize code on the back end, or to use CKEditor. I chose the latter because it was so easy. Take a look at CK, it's a great piece of free code.